<!DOCTYPE html>
<html class="">
 <head>
  <meta content="true" name="wechat-enable-text-zoom-em"/>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <meta content="light dark" name="color-scheme"/>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" name="viewport"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  <meta content="telephone=no" name="format-detection"/>
  <meta content="origin-when-cross-origin" name="referrer"/>
  <meta content="strict-origin-when-cross-origin" name="referrer"/>
  <meta content="在现代Web开发中，动态生成内容是非常常见的需求。为了更好地将数据与界面结合，使用模板引擎是一种有效的方式。本文将向你介绍Freemarker，一个强大的Java模板引擎，帮助你快速创建动态模板。" name="description">
   <meta content="springboot葵花宝典" name="author">
    <meta content="Freemarker快速入门：创建动态模板引擎" property="og:title">
     <meta content="https://mp.weixin.qq.com/s/zl3KEoanEtZdGiwj0oI3Pw" property="og:url">
      <meta content="https://mmbiz.qpic.cn/mmbiz_jpg/fx1lx9ichONagQbopicibgVy0R8VwPVypHrsSwyeMUfe1RZUKyGCymTPmsiaFfS7qMa5Y7MxGKRtleHkAZwzKaDjWw/0?wx_fmt=jpeg" property="og:image">
       <meta content="在现代Web开发中，动态生成内容是非常常见的需求。为了更好地将数据与界面结合，使用模板引擎是一种有效的方式。本文将向你介绍Freemarker，一个强大的Java模板引擎，帮助你快速创建动态模板。" property="og:description">
        <meta content="微信公众平台" property="og:site_name">
         <meta content="article" property="og:type">
          <meta content="springboot葵花宝典" property="og:article:author">
           <meta content="summary" property="twitter:card">
            <meta content="https://mmbiz.qpic.cn/mmbiz_jpg/fx1lx9ichONagQbopicibgVy0R8VwPVypHrsSwyeMUfe1RZUKyGCymTPmsiaFfS7qMa5Y7MxGKRtleHkAZwzKaDjWw/0?wx_fmt=jpeg" property="twitter:image"/>
            <meta content="Freemarker快速入门：创建动态模板引擎" property="twitter:title"/>
            <meta content="springboot葵花宝典" property="twitter:creator"/>
            <meta content="微信公众平台" property="twitter:site"/>
            <meta content="在现代Web开发中，动态生成内容是非常常见的需求。为了更好地将数据与界面结合，使用模板引擎是一种有效的方式。本文将向你介绍Freemarker，一个强大的Java模板引擎，帮助你快速创建动态模板。" property="twitter:description"/>
            <title>
            </title>
            <style>
             .cooldown_tips {
        margin: 30px auto;
        margin-top: 0;
        display: flex;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        background-color: #f6f7f9;
        border-radius: 6px;
      }
      .cooldown_tips_icon {
        display: block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
            </style>
            <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
            </script>
            <style>
             a {color: #607fa6;text-decoration:none;word-wrap:break-word;word-break:break-all;}.rich_media_title{padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid #e7e7eb;font-weight:400;} .rich_media_meta_list{font-size:14px;margin-bottom: 22px;}
		.rich_media_meta{display:inline-block;vertical-align:middle;margin-right:8px;margin-bottom:10px;font-size:14px;}.rich_media_meta_text{color:#8c8c8c;color:rgba(0, 0, 0, 0.3)}.rich_media_meta_list
		em {font-style: normal;}@media screen and (max-width:768px){.rich_media{position:
		relative;padding: 20px 15px 15px;background-color: #fff;}}.rich_media_content{text-align:justify;} .rich_media_content * {max-width:100%!important;box-sizing: border-box!important;-webkit-box-sizing:
		border-box!important;word-wrap: break-word!important;}.rich_media_content
		blockquote {margin: 0;padding-left: 10px;border-left: 3px solid #dbdbdb;}.rich_media_content
		.list-paddingleft-2 {padding-left: 2.2em;}a.rich_media_meta_nickname{display: none;}@media screen and (min-width:1025px){.rich_media{position:relative;}a.rich_media_meta_nickname{display:inline-block!important;}span.rich_media_meta_nickname
		{display: inline-block!important;}.rich_media {width:780px;margin-left:auto;margin-right:auto;}a.fwjm{font-size: 12px;color: #ececec;}.tenvideo_player {position: relative;width:
		100 %;height: 100 %;margin: auto;background: #000;}* {margin:0px;padding:0px;} body{line-height: 1.6;letter-spacing: .034em;}
		.dy_all {text-align: center;margin: 30px 0;} .dy_all a {display: inline-block;height:
		38px;line-height: 38px;padding: 0 18px;background-color: #009688;color:
		#fff;white-space: nowrap;font-size: 14px;border: none;border-radius: 2px;cursor:
		pointer;text-align: center;outline: 0;-webkit-appearance: none;transition:
		all .3s;-webkit-transition: all .3s;box-sizing: border-box;} img{max-width: 780px!important;}

		.crawler-info{padding: 8px 0;} .article-link>img{width: 16px;}
		.comment-item::before,.comment-item::after{content:'';display:block;height:0;visibility:hidden;clear:both;*zoom:1;} .comment-item{margin-bottom:30px;}
		.avatar{width:12%; padding-right:10px;float:left;box-sizing:border-box;} .avatar img{width:100%;border-radius:3px;border:1px solid #e0e0e0;}
		.comment-body{float:left;width:88%;} .comment-body .comment-info{color:#b3b3b3;margin-bottom:4px;margin-top: -5px;} .comment-body .comment-info>span:last-child{float:right;} 
		.comment-author{border-left:4px solid green;padding-left:6px;margin:8px 0;}

		@media screen and (max-width: 420px) {.article-link>img {margin-left: 0px;}}
		@media screen and (min-width: 480px) {.avatar {width: 9%;}.comment-body {width: 91%;}}
		.comment {margin-bottom: 25px;}
            </style>
            <style>
             .radius_avatar{display:inline-block;background-color:#fff;padding:3px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;overflow:hidden;vertical-align:middle}.radius_avatar img{display:block;width:100%;height:100%;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-color:#eee}.rich_media_inner{word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.rich_media_area_primary{padding:20px 16px 12px;padding:calc(20px + constant(safe-area-inset-top)) calc(16px + constant(safe-area-inset-right)) 12px calc(16px + constant(safe-area-inset-left));padding:calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));background-color:#fafafa}.rich_media_area_primary.voice{padding-top:66px}.rich_media_area_primary .weui-loadmore_line{background-color:#fafafa}.rich_media_area_extra{padding:0 16px 16px;padding:0 calc(16px + constant(safe-area-inset-right)) calc(16px + constant(safe-area-inset-bottom)) calc(16px + constant(safe-area-inset-left));padding:0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}.rich_media_extra{padding-top:30px}.mpda_bottom_container .rich_media_extra{padding-top:24px}.mpda_bottom_container .rich_media_extra .mpad_more_list{right:-10px}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.6}body{-webkit-touch-callout:none;font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;color:#333;background-color:#f2f2f2;letter-spacing:.034em}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:16px}*{margin:0;padding:0}a{color:#576b95;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.wx-edui-video_source_link{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:14px 16px;background-color:#f7f7f7;border-radius:8px;font-size:15px;line-height:18px;width:100%;box-sizing:border-box;margin-bottom:8px}.wx-edui-video_source_link:active{background-color:#ebebeb}.wx-edui-video_source_link.wx-edui-article{margin-top:8px}.wx-edui-video_source_word{color:rgba(0,0,0,0.5);-webkit-flex-shrink:0;flex-shrink:0;width:8em}.wx-edui-video_account_arrow{display:inline-block;vertical-align:middle;width:10px;height:20px;-webkit-flex-shrink:0;flex-shrink:0;background-position:center;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M7.588 12.43l-1.061 1.06L.748 7.713a.996.996 0 010-1.413L6.527.52l1.06 1.06-5.424 5.425 5.425 5.425z' id='a'/%3E%3C/defs%3E%3Cuse fill-opacity='.3' transform='rotate(-180 5.02 9.505)' xlink:href='%23a' fill-rule='evenodd'/%3E%3C/svg%3E")}.wx-edui-video_account_info{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:relative;width:calc(100% - 120px)}.wx-edui-video_account_avatar{width:20px;height:20px;border-radius:50%;-webkit-flex-shrink:0;flex-shrink:0;-o-object-fit:cover;object-fit:cover;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='160' height='160' viewBox='0 0 160 160'%3E  %3Cimage width='160' height='160' fill='none' fill-rule='evenodd' xlink:href=''/%3E%3C/svg%3E")}.wx-edui-video_account_name{color:rgba(0,0,0,0.9);margin:0 2px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 40px)}.rich_media_title{font-size:22px;line-height:1.4;margin-bottom:14px}@supports(-webkit-overflow-scrolling:touch){.rich_media_title{font-weight:700}}.rich_media_meta_list{margin-bottom:22px;line-height:20px;font-size:0;word-wrap:break-word;word-break:break-all}.rich_media_meta_list em{font-style:normal}.rich_media_meta{display:inline-block;vertical-align:middle;margin:0 10px 10px 0;font-size:15px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rich_media_meta.icon_appmsg_tag{margin-right:4px}.rich_media_meta.appmsg_title_tag{margin-right:8px}.rich_media_meta.meta_tag_text{margin-right:0}.rich_media_meta_primary{display:block;margin-bottom:10px;font-size:15px}.meta_original_tag{padding:0 .5em;font-size:12px;line-height:1.4;background-color:#f2f2f2;color:#888}.meta_enterprise_tag img{width:30px;height:30px!important;display:block;position:relative;margin-top:-3px;border:0}.rich_media_meta_link{color:#576b95}.rich_media_meta_text{color:rgba(0,0,0,0.3)}.rich_media_meta_text.rich_media_meta_split{padding-left:10px}.rich_media_meta_text.rich_media_meta_split:before{position:absolute;top:50%;left:0;margin-top:-6px;content:' ';display:block;border-left:1px solid #888;width:200%;height:130%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-transform:scale(0.5);transform:scale(0.5);-webkit-transform-origin:0 0;transform-origin:0 0}.rich_media_meta_text.article_modify_tag{position:relative}.rich_media_meta_nickname{position:relative}.rich_media_thumb_wrp{margin-bottom:6px}.rich_media_thumb_wrp .original_img_wrp{display:block}.rich_media_thumb{display:block;width:100%}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important}.rich_media_content p{clear:both;min-height:1em}.rich_media_content em{font-style:italic}.rich_media_content fieldset{min-width:0}.rich_media_content .list-paddingleft-1,.rich_media_content .list-paddingleft-2,.rich_media_content .list-paddingleft-3{padding-left:2.2em}.rich_media_content .list-paddingleft-1 .list-paddingleft-2,.rich_media_content .list-paddingleft-2 .list-paddingleft-2,.rich_media_content .list-paddingleft-3 .list-paddingleft-2{padding-left:30px}.rich_media_content .list-paddingleft-1{padding-left:1.2em}.rich_media_content .list-paddingleft-3{padding-left:3.2em}.rich_media_content .code-snippet,.rich_media_content .code-snippet__fix{max-width:1000%!important}.rich_media_content .code-snippet *,.rich_media_content .code-snippet__fix *{max-width:1000%!important}.img_loadederror{background-color:#eeedeb;border:1px solid #eeedeb;background-image:url('');background-size:40px;background-position:center center;background-repeat:no-repeat}.img_loading{background-color:#eeedeb;border:1px solid #eeedeb;background-size:22px;background-position:center center;background-repeat:no-repeat;background-image:url('')}.db{display:block}.tips_global_primary{color:rgba(0,0,0,0.3)}.reset_btn{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;background-color:transparent;border:0;font-family:inherit;display:inline-block;vertical-align:middle}.rich_media_content img{height:auto!important}blockquote{padding-left:10px;border-left:3px solid #dbdbdb;color:rgba(0,0,0,0.5);font-size:15px;padding-top:4px;margin:1em 0}.blockquote_info{color:rgba(0,0,0,0.3);margin-top:1.17647059em;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.blockquote_article{display:block}.appmsg_share_notice{font-size:16px;color:#888;position:relative;padding:1.25em 0;margin-bottom:1.75em}.appmsg_share_notice:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #dfdfdf;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.appmsg_share_notice:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1px solid #dfdfdf;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.appmsg_share_notice_hd{font-weight:700;padding-bottom:.2em}.dn{display:none}.qa__card{background-color:#fafafa;border-radius:4px;padding:20px;position:relative;margin:8px 0}.qa__card::before{content:"";display:block;position:absolute;width:24px;height:24px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Cpath id='5857326e-0388-4946-90a6-c4e335712b3a-a' d='M14.706 12.611l-.147.004c-.461 0-.748-.362-.568-.767a.945.945 0 0 1 .663-.533c.652-.158 1.09-.662 1.09-1.245 0-.705-.682-1.289-1.545-1.289-.862 0-1.546.584-1.546 1.29v3.859c0 1.426-1.269 2.57-2.826 2.57C8.269 16.5 7 15.356 7 13.93c0-1.252.984-2.316 2.338-2.52h.103c.35 0 .615.221.615.538a.573.573 0 0 1-.007.107.429.429 0 0 1-.04.123c-.107.25-.373.46-.663.533-.648.156-1.09.658-1.09 1.219 0 .705.682 1.289 1.545 1.289.862 0 1.546-.584 1.546-1.29V10.07c0-1.426 1.269-2.57 2.826-2.57C15.731 7.5 17 8.644 17 10.07c0 1.257-.96 2.31-2.294 2.541z'/%3E  %3C/defs%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath fill='%23FFF' fill-opacity='.9' stroke='%23000' stroke-opacity='.05' stroke-width='.5' d='M12 22.75c5.937 0 10.75-4.813 10.75-10.75S17.937 1.25 12 1.25 1.25 6.063 1.25 12 6.063 22.75 12 22.75z'/%3E    %3Cuse fill='%236467F0' xlink:href='%235857326e-0388-4946-90a6-c4e335712b3a-a'/%3E    %3Cuse fill='%23FFF' fill-opacity='.2' xlink:href='%235857326e-0388-4946-90a6-c4e335712b3a-a'/%3E  %3C/g%3E%3C/svg%3E");right:8px;top:8px}.qa__card-hd{font-size:14px;color:rgba(0,0,0,0.5);margin-bottom:8px}.qa__card-hd span{margin-right:5px}.qa__card-desc{line-height:24px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.qa__card-bd{margin-bottom:12px}.qa__card-bd:last-child{margin-bottom:0}.qa__card-ft{font-size:14px;color:rgba(0,0,0,0.5)}.qa__card-ft span{margin-right:12px}.qa__card-theme{font-size:18px;font-weight:500;line-height:30.8px}.qa__icon-qa{display:inline-block;vertical-align:-4px;width:20px;height:20px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E  %3Cg fill='%23F7F7F7'%3E    %3Cpath d='M11.938 16.083l-.007.102a.75.75 0 0 1-.743.648H9.562a.75.75 0 0 1-.75-.75h3.126zm0-2.5l-.007.102a.75.75 0 0 1-.642.641l-.101.007H9.562a.75.75 0 0 1-.743-.648l-.007-.102h3.126zm-1.563-10.25a5.375 5.375 0 0 1 4.341 8.545l-.159.207-.583-.472a4.625 4.625 0 1 0-7.363-.216l.158.208-.584.47a5.375 5.375 0 0 1 4.19-8.742z'/%3E    %3Cpath d='M10.453 6.833c.6 0 1.088.16 1.444.497.347.319.525.76.525 1.322 0 .422-.122.788-.347 1.097-.094.112-.356.356-.769.722a1.882 1.882 0 0 0-.431.506 1.34 1.34 0 0 0-.178.694v.215h-.76v-.215c0-.31.057-.581.179-.816.122-.281.44-.637.947-1.087.15-.15.253-.263.318-.338.178-.234.272-.478.272-.74 0-.375-.103-.666-.31-.872-.224-.225-.534-.328-.927-.328-.46 0-.807.15-1.041.459-.197.262-.3.619-.3 1.078h-.75c0-.656.188-1.181.553-1.575.384-.412.91-.619 1.575-.619z'/%3E  %3C/g%3E%3C/svg%3E")}.weui-btn_primary.qa__btn{position:absolute;right:15px;bottom:20px;width:111px;padding:8px 0}.qa__card_v2 .weui-btn_primary.qa__btn{bottom:32px}.qa__card_v2 .qa__card-bd{margin-bottom:6px}.qa__card-content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.qa__card-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:8px;-webkit-flex-shrink:0;flex-shrink:0}.qa__card-avatar img{width:100%}.qa__card-main{overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;flex:1}.qa__card-main-name{font-weight:500;line-height:27.2px;margin-bottom:2px;margin-right:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.qa__card-main-info{font-size:14px;color:rgba(0,0,0,0.5);line-height:17px}.qa__card-main-info span{margin-right:5px}.qa__card_v3{padding:21px 16px}.appmsg__album{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#f7f7f7;border-radius:8px;box-sizing:border-box;padding:16px 20px;position:relative;margin:15px 0}.appmsg__album::after{content:"";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:inline-block;width:12px;height:24px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cdefs%3E    %3Cpath id='d4324815-fdc3-4bf7-8660-c87553879608-a' d='M7.588 12.43l-1.061 1.06L.748 7.713a.996.996 0 0 1 0-1.413L6.527.52l1.06 1.06-5.424 5.425 5.425 5.425z'/%3E  %3C/defs%3E  %3Cuse fill-opacity='.3' fill-rule='evenodd' transform='rotate(-180 5.02 9.505)' xlink:href='%23d4324815-fdc3-4bf7-8660-c87553879608-a'/%3E%3C/svg%3E")}.appmsg__album:active{background-color:#ebebeb}.appmsg__ablum-title{padding-right:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px;font-weight:500;font-size:17px}.appmsg__head{font-size:14px;color:rgba(0,0,0,0.5);margin-bottom:8px;line-height:18px}@media(prefers-color-scheme:dark){.appmsg__album{background-color:#2f2f2f}.appmsg__album::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cdefs%3E    %3Cpath id='d4324815-fdc3-4bf7-8660-c87553879608-a' d='M7.588 12.43l-1.061 1.06L.748 7.713a.996.996 0 0 1 0-1.413L6.527.52l1.06 1.06-5.424 5.425 5.425 5.425z'/%3E  %3C/defs%3E  %3Cuse fill='%23FFF' fill-opacity='.3' fill-rule='evenodd' transform='rotate(-180 5.02 9.505)' xlink:href='%23d4324815-fdc3-4bf7-8660-c87553879608-a'/%3E%3C/svg%3E")}.appmsg__album:active{background-color:#2d2d2d}.appmsg__head{color:rgba(255,255,255,0.5)}.appmsg__ablum-title{color:rgba(255,255,255,0.8)}}.code-snippet{margin:10px 0;display:block;overflow-x:auto;font-size:14px;padding:1em 1em 1em 3em;color:#333;position:relative;background-color:#fafafa;border:1px solid #f0f0f0;border-radius:2px;counter-reset:line;white-space:normal;-webkit-overflow-scrolling:touch}.code-snippet code{text-align:left;font-size:14px;display:block;white-space:pre-wrap;position:relative;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}.code-snippet code::before{position:absolute;min-width:1.5em;text-align:right;left:-2.5em;counter-increment:line;content:counter(line);display:inline;margin-right:12px;color:rgba(0,0,0,0.15)}.code-snippet_nowrap code{white-space:pre;display:-webkit-box;display:-webkit-flex;display:flex}.code-snippet__fix{font-size:14px;margin:10px 0;display:block;color:#333;position:relative;background-color:rgba(0,0,0,0.03);border:1px solid #f0f0f0;border-radius:2px;display:-webkit-box;display:-webkit-flex;display:flex;line-height:26px}.code-snippet__fix pre{overflow-x:auto;padding:1em;padding-left:0;white-space:normal;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-overflow-scrolling:touch}.code-snippet__fix code{text-align:left;font-size:14px;display:block;white-space:pre;display:-webkit-box;display:-webkit-flex;display:flex;position:relative;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}.code-snippet__fix .code-snippet__line-index{counter-reset:line;-webkit-flex-shrink:0;flex-shrink:0;height:100%;padding:1em;list-style-type:none}.code-snippet__fix .code-snippet__line-index li{list-style-type:none;text-align:right}.code-snippet__fix .code-snippet__line-index li::before{min-width:1.5em;text-align:right;left:-2.5em;counter-increment:line;content:counter(line);display:inline;color:rgba(0,0,0,0.15)}.code-snippet__comment,.code-snippet__quote{color:#afafaf;font-style:italic}.code-snippet__keyword,.code-snippet__selector-tag,.code-snippet__subst{color:#ca7d37}.code-snippet__number,.code-snippet__literal,.code-snippet__variable,.code-snippet__template-variable,.code-snippet__tag .code-snippet__attr{color:#0e9ce5}.code-snippet__string,.code-snippet__doctag{color:#d14}.code-snippet__title,.code-snippet__section,.code-snippet__selector-id{color:#d14}.code-snippet__subst{font-weight:normal}.code-snippet__type,.code-snippet__class .code-snippet__title{color:#0e9ce5}.code-snippet__tag,.code-snippet__name,.code-snippet__attribute{color:#0e9ce5;font-weight:normal}.code-snippet__regexp,.code-snippet__link{color:#ca7d37}.code-snippet__symbol,.code-snippet__bullet{color:#d14}.code-snippet__built_in,.code-snippet__builtin-name{color:#ca7d37}.code-snippet__meta{color:#afafaf}.code-snippet__deletion{background:#fdd}.code-snippet__addition{background:#dfd}.code-snippet__emphasis{font-style:italic}.code-snippet__strong{font-weight:bold}@media(prefers-color-scheme:dark){.code-snippet{color:rgba(255,255,255,0.8)}.code-snippet code::before{color:rgba(255,255,255,0.05)}.code-snippet__fix{color:rgba(255,255,255,0.8)}.code-snippet__fix .code-snippet__line-index li::before{color:rgba(255,255,255,0.3)}}.cell{padding:.8em 0;display:block;position:relative}.cell_hd,.cell_bd,.cell_ft{display:table-cell;vertical-align:middle;word-wrap:break-word;word-break:break-all;white-space:nowrap}.cell_primary{width:2000px;white-space:normal}.flex_cell{padding:10px 0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.flex_cell_primary{width:100%;-webkit-box-flex:1;-webkit-flex:1;box-flex:1;flex:1}.original_tool_area{display:block;padding:.75em 1em 0;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#333;border:1px solid #eaeaea;margin:20px 0}.original_tool_area .tips_global{position:relative;padding-bottom:.5em;font-size:15px}.original_tool_area .tips_global:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1px solid #dbdbdb;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.original_tool_area .radius_avatar{width:27px;height:27px;padding:0;margin-right:.5em}.original_tool_area .radius_avatar img{height:100%!important}.original_tool_area .flex_cell_bd{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.original_tool_area .flex_cell_ft{font-size:14px;color:#888;padding-left:1em;white-space:nowrap}.original_tool_area .icon_access:after{content:" ";display:inline-block;height:8px;width:8px;border-width:1px 1px 0 0;border-style:solid;transform:matrix(0.71,0.71,-0.71,0.71,0,0);-ms-transform:matrix(0.71,0.71,-0.71,0.71,0,0);-webkit-transform:matrix(0.71,0.71,-0.71,0.71,0,0);position:relative;top:-2px;top:-1px}.rich_media_global_msg{position:fixed;top:0;left:0;right:0;padding:.85em 35px .85em 15px;z-index:2;background-color:#c6e0f8;color:#888;font-size:12px}.rich_media_global_msg .icon_closed{position:absolute;right:15px;top:50%;margin-top:-5px;line-height:300px;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);background:transparent url(//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_appmsg_msg_closed_sprite.2x42f400.png) no-repeat 0 0;width:11px;height:11px;vertical-align:middle;display:inline-block;background-size:100% auto}.rich_media_global_msg .icon_closed:active{background-position:0 -17px}.rich_media_global_msg.voice{color:#1aad19;background-color:#e8f6e8;padding-left:43.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rich_media_global_msg.voice .ic_voice{position:absolute;top:50%;margin-top:-10px;left:15px;display:inline-block;width:13.3px;height:18.3px;background:url() no-repeat center;background-size:contain}.rich_media_global_msg.voice .icon_more{position:absolute;right:15px;top:50%;margin-top:-6.5px;width:8px;height:13px;background:url() no-repeat center;background-size:contain}.preview_appmsg .rich_media_title{margin-top:2.3em}@media screen and (min-width:1024px){.rich_media_global_msg{position:relative;margin-bottom:32px}.preview_appmsg .rich_media_title.rich_media_title{margin-top:0}}.pages_reset{color:#333;line-height:1.6;font-size:16px;font-weight:400;font-style:normal;text-indent:0;letter-spacing:normal;text-align:left;text-decoration:none;white-space:normal}.weapp_element,.weapp_display_element,.mp-miniprogram{display:block;margin:1em 0}.share_audio_context{margin:16px 0}.weapp_text_link{font-size:17px}.weapp_text_link:before{content:'';display:inline-block;line-height:1;background-size:contain;background-repeat:no-repeat;background-image:url('');vertical-align:middle;font-size:11px;color:#888;margin-right:4px;margin-top:-3px;background-position:center;height:20px;width:20px}.weapp_text_link:empty{display:none}.flex_context{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.flex_bd{-webkit-box-flex:1;-webkit-flex:1;flex:1;word-wrap:break-word;word-break:break-all}.original_page{background-color:#fff;font-size:16px}.account_info{padding:0 0 20px}.account_info .flex_bd{padding-left:.85em}.radius_avatar.account_avatar{width:28px;height:28px;padding:0}.account_nickname{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-height:1.2;color:#576b95;font-size:14px}.account_nickname_inner{font-weight:400;vertical-align:top}.account_desc{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;color:#b2b2b2;font-size:13px;line-height:1.2;padding-top:.3em}.account_desc_inner{display:inline;vertical-align:top}.share_notice{margin-bottom:16px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.share_media{padding-bottom:18px}.original_panel{padding:20px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;position:relative}.original_panel .original_account{margin-bottom:12px;position:relative;z-index:1}.original_panel .original_account_avatar{width:28px;height:28px;padding:0}.original_panel .original_account_nickname{padding-left:.85em;font-size:15px;color:rgba(0,0,0,0.5)}.original_panel_title{font-size:17px;line-height:24px;color:rgba(0,0,0,0.9);font-weight:bold;margin:0 0 8px 0}.original_panel_content{color:#333}.original_panel_tool{padding-top:20px;position:relative;z-index:1}.appmsg_card_context{position:relative;background-color:#f7f7f7;border-radius:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.appmsg_card_active:active{background-color:#ebebeb}.original_area_primary{margin-bottom:24px;font-size:15px}.original_primary_tips{padding:0 16px 32px;color:rgba(0,0,0,0.5)}.original_primary_tips p:first-child{font-weight:700;padding-bottom:8px;line-height:1.4}.original_primary_card_tips{line-height:1.4;color:rgba(0,0,0,0.3)}.original_primary_card{padding:20px 16px;margin-top:16px;line-height:1.4;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.original_primary_card .radius_avatar{padding:0;width:40px;height:40px;margin-right:12px;vertical-align:middle}.original_primary_card .weui-flex__item{min-width:0}.original_primary_card .weui-flex__ft{position:relative;padding-right:24px}.original_primary_card .weui-flex__ft:after{content:"";font-size:12px;background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='20' viewBox='0 0 10 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M6.323 10.358l-.884.884L.623 6.426a.83.83 0 0 1 0-1.177L5.44.433l.884.884-4.52 4.52 4.52 4.521z' id='a'/%3E%3C/defs%3E%3Cuse fill='%23000' transform='rotate(-180 4.184 7.921)' xlink:href='%23a' fill-rule='evenodd' opacity='.3' /%3E%3C/svg%3E") 0 0 no-repeat;background-size:1em;width:1em;height:2em;position:absolute;right:0;top:50%;margin-top:-1em}.original_primary_nickname{color:rgba(0,0,0,0.9);font-size:17px;font-weight:700;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;display:block}.original_primary_desc{color:rgba(0,0,0,0.5);font-size:14px;padding-top:4px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}body{--weui-BTN-DISABLED-FONT-COLOR:rgba(0,0,0,0.2)}body[data-weui-theme='dark']{--weui-BTN-DISABLED-FONT-COLOR:rgba(255,255,255,0.2)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BTN-DISABLED-FONT-COLOR:rgba(255,255,255,0.2)}}body{--weui-BTN-DEFAULT-BG:#f2f2f2}body[data-weui-theme='dark']{--weui-BTN-DEFAULT-BG:rgba(255,255,255,0.08)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BTN-DEFAULT-BG:rgba(255,255,255,0.08)}}body{--weui-BTN-DEFAULT-COLOR:#06ae56}body[data-weui-theme='dark']{--weui-BTN-DEFAULT-COLOR:rgba(255,255,255,0.8)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BTN-DEFAULT-COLOR:rgba(255,255,255,0.8)}}body{--weui-BTN-DEFAULT-ACTIVE-BG:#e6e6e6}body[data-weui-theme='dark']{--weui-BTN-DEFAULT-ACTIVE-BG:rgba(122,122,122,0.1536)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BTN-DEFAULT-ACTIVE-BG:rgba(122,122,122,0.1536)}}body{--weui-DIALOG-LINE-COLOR:rgba(0,0,0,0.1)}body[data-weui-theme='dark']{--weui-DIALOG-LINE-COLOR:rgba(255,255,255,0.1)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-DIALOG-LINE-COLOR:rgba(255,255,255,0.1)}}body{--weui-BG-0:#ededed;--weui-BG-1:#f7f7f7;--weui-BG-2:#fff;--weui-BG-3:#f7f7f7;--weui-BG-4:#4c4c4c;--weui-BG-5:#fff;--weui-FG-0:rgba(0,0,0,0.9);--weui-FG-HALF:rgba(0,0,0,0.9);--weui-FG-1:rgba(0,0,0,0.5);--weui-FG-2:rgba(0,0,0,0.3);--weui-FG-3:rgba(0,0,0,0.1);--weui-RED:#fa5151;--weui-ORANGE:#fa9d3b;--weui-YELLOW:#ffc300;--weui-GREEN:#91d300;--weui-LIGHTGREEN:#95ec69;--weui-BRAND:#07c160;--weui-BLUE:#10aeff;--weui-INDIGO:#1485ee;--weui-PURPLE:#6467f0;--weui-WHITE:#fff;--weui-LINK:#576b95;--weui-TEXTGREEN:#06ae56;--weui-FG:black;--weui-BG:white;--weui-TAG-TEXT-ORANGE:#fa9d3b;--weui-TAG-BACKGROUND-ORANGE:rgba(250,157,59,0.1);--weui-TAG-TEXT-GREEN:#06ae56;--weui-TAG-BACKGROUND-GREEN:rgba(6,174,86,0.1);--weui-TAG-TEXT-BLUE:#10aeff;--weui-TAG-BACKGROUND-BLUE:rgba(16,174,255,0.1);--weui-TAG-TEXT-BLACK:rgba(0,0,0,0.5);--weui-TAG-BACKGROUND-BLACK:rgba(0,0,0,0.05)}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BG-0:#191919;--weui-BG-1:#1f1f1f;--weui-BG-2:#232323;--weui-BG-3:#2f2f2f;--weui-BG-4:#606060;--weui-BG-5:#2c2c2c;--weui-FG-0:rgba(255,255,255,0.8);--weui-FG-HALF:rgba(255,255,255,0.6);--weui-FG-1:rgba(255,255,255,0.5);--weui-FG-2:rgba(255,255,255,0.3);--weui-FG-3:rgba(255,255,255,0.05);--weui-RED:#fa5151;--weui-ORANGE:#c87d2f;--weui-YELLOW:#cc9c00;--weui-GREEN:#74a800;--weui-LIGHTGREEN:#28b561;--weui-BRAND:#07c160;--weui-BLUE:#10aeff;--weui-INDIGO:#1196ff;--weui-PURPLE:#8183ff;--weui-WHITE:rgba(255,255,255,0.8);--weui-LINK:#7d90a9;--weui-TEXTGREEN:#259c5c;--weui-FG:white;--weui-BG:black;--weui-TAG-TEXT-ORANGE:rgba(250,157,59,0.6);--weui-TAG-BACKGROUND-ORANGE:rgba(250,157,59,0.1);--weui-TAG-TEXT-GREEN:rgba(6,174,86,0.6);--weui-TAG-BACKGROUND-GREEN:rgba(6,174,86,0.1);--weui-TAG-TEXT-BLUE:rgba(16,174,255,0.6);--weui-TAG-BACKGROUND-BLUE:rgba(16,174,255,0.1);--weui-TAG-TEXT-BLACK:rgba(255,255,255,0.5);--weui-TAG-BACKGROUND-BLACK:rgba(255,255,255,0.05)}}body[data-weui-theme='dark']{--weui-BG-0:#191919;--weui-BG-1:#1f1f1f;--weui-BG-2:#232323;--weui-BG-3:#2f2f2f;--weui-BG-4:#606060;--weui-BG-5:#2c2c2c;--weui-FG-0:rgba(255,255,255,0.8);--weui-FG-HALF:rgba(255,255,255,0.6);--weui-FG-1:rgba(255,255,255,0.5);--weui-FG-2:rgba(255,255,255,0.3);--weui-FG-3:rgba(255,255,255,0.05);--weui-RED:#fa5151;--weui-ORANGE:#c87d2f;--weui-YELLOW:#cc9c00;--weui-GREEN:#74a800;--weui-LIGHTGREEN:#28b561;--weui-BRAND:#07c160;--weui-BLUE:#10aeff;--weui-INDIGO:#1196ff;--weui-PURPLE:#8183ff;--weui-LINK:#7d90a9;--weui-TEXTGREEN:#259c5c;--weui-FG:white;--weui-BG:black;--weui-TAG-TEXT-ORANGE:rgba(250,157,59,0.6);--weui-TAG-BACKGROUND-ORANGE:rgba(250,157,59,0.1);--weui-TAG-TEXT-GREEN:rgba(6,174,86,0.6);--weui-TAG-BACKGROUND-GREEN:rgba(6,174,86,0.1);--weui-TAG-TEXT-BLUE:rgba(16,174,255,0.6);--weui-TAG-BACKGROUND-BLUE:rgba(16,174,255,0.1);--weui-TAG-TEXT-BLACK:rgba(255,255,255,0.5);--weui-TAG-BACKGROUND-BLACK:rgba(255,255,255,0.05)}body{--weui-BG-COLOR-ACTIVE:#ececec}body[data-weui-theme='dark']{--weui-BG-COLOR-ACTIVE:#282828}@media(prefers-color-scheme:dark){body:not([data-weui-theme='light']){--weui-BG-COLOR-ACTIVE:#282828}}[class^="weui-icon-"],[class*=" weui-icon-"]{display:inline-block;vertical-align:middle;width:24px;height:24px;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:currentColor}.weui-icon-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-download{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.25%2012.04l-1.72-1.72-1.06%201.06%202.828%202.83a1%201%200%20001.414-.001l2.828-2.828-1.06-1.061-1.73%201.73V7h-1.5v5.04zm0-5.04V2h1.5v5h6.251c.55%200%20.999.446.999.996v13.008a.998.998%200%2001-.996.996H4.996A.998.998%200%20014%2021.004V7.996A1%201%200%20014.999%207h6.251z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.25%2012.04l-1.72-1.72-1.06%201.06%202.828%202.83a1%201%200%20001.414-.001l2.828-2.828-1.06-1.061-1.73%201.73V7h-1.5v5.04zm0-5.04V2h1.5v5h6.251c.55%200%20.999.446.999.996v13.008a.998.998%200%2001-.996.996H4.996A.998.998%200%20014%2021.004V7.996A1%201%200%20014.999%207h6.251z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-info{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.75-12v7h1.5v-7h-1.5zM12%209a1%201%200%20100-2%201%201%200%20000%202z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.75-12v7h1.5v-7h-1.5zM12%209a1%201%200%20100-2%201%201%200%20000%202z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-safe-success{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.6C315.5%2046.7%20180.4%2093.1%2057.6%20132c0%20129.3.2%20231.7.2%20339.7%200%20304.2%20248.3%20471.6%20443.1%20523.7C695.7%20943.3%20944%20775.9%20944%20471.7c0-108%20.2-210.4.2-339.7C821.4%2093.1%20686.3%2046.7%20500.9%204.6zm248.3%20349.1l-299.7%20295c-2.1%202-5.3%202-7.4-.1L304.4%20506.1c-2-2.1-2.3-5.7-.6-8l18.3-24.9c1.7-2.3%205-2.8%207.2-1l112.2%2086c2.3%201.8%206%201.7%208.1-.1l274.7-228.9c2.2-1.8%205.7-1.7%207.7.3l17%2016.8c2.2%202.1%202.2%205.3.2%207.4z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23070202%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.6C315.5%2046.7%20180.4%2093.1%2057.6%20132c0%20129.3.2%20231.7.2%20339.7%200%20304.2%20248.3%20471.6%20443.1%20523.7C695.7%20943.3%20944%20775.9%20944%20471.7c0-108%20.2-210.4.2-339.7C821.4%2093.1%20686.3%2046.7%20500.9%204.6zm248.3%20349.1l-299.7%20295c-2.1%202-5.3%202-7.4-.1L304.4%20506.1c-2-2.1-2.3-5.7-.6-8l18.3-24.9c1.7-2.3%205-2.8%207.2-1l112.2%2086c2.3%201.8%206%201.7%208.1-.1l274.7-228.9c2.2-1.8%205.7-1.7%207.7.3l17%2016.8c2.2%202.1%202.2%205.3.2%207.4z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23070202%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-safe-warn{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.5c-185.4%2042-320.4%2088.4-443.2%20127.3%200%20129.3.2%20231.7.2%20339.6%200%20304.1%20248.2%20471.4%20443%20523.6%20194.7-52.2%20443-219.5%20443-523.6%200-107.9.2-210.3.2-339.6C821.3%2092.9%20686.2%2046.5%20500.9%204.5zm-26.1%20271.1h52.1c5.8%200%2010.3%204.7%2010.1%2010.4l-11.6%20313.8c-.1%202.8-2.5%205.2-5.4%205.2h-38.2c-2.9%200-5.3-2.3-5.4-5.2L464.8%20286c-.2-5.8%204.3-10.4%2010-10.4zm26.1%20448.3c-20.2%200-36.5-16.3-36.5-36.5s16.3-36.5%2036.5-36.5%2036.5%2016.3%2036.5%2036.5-16.4%2036.5-36.5%2036.5z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23020202%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.5c-185.4%2042-320.4%2088.4-443.2%20127.3%200%20129.3.2%20231.7.2%20339.6%200%20304.1%20248.2%20471.4%20443%20523.6%20194.7-52.2%20443-219.5%20443-523.6%200-107.9.2-210.3.2-339.6C821.3%2092.9%20686.2%2046.5%20500.9%204.5zm-26.1%20271.1h52.1c5.8%200%2010.3%204.7%2010.1%2010.4l-11.6%20313.8c-.1%202.8-2.5%205.2-5.4%205.2h-38.2c-2.9%200-5.3-2.3-5.4-5.2L464.8%20286c-.2-5.8%204.3-10.4%2010-10.4zm26.1%20448.3c-20.2%200-36.5-16.3-36.5-36.5s16.3-36.5%2036.5-36.5%2036.5%2016.3%2036.5%2036.5-16.4%2036.5-36.5%2036.5z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23020202%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-success{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-success-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm-1.172-6.242l5.809-5.808.848.849-5.95%205.95a1%201%200%2001-1.414%200L7%2012.426l.849-.849%202.98%202.98z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm-1.172-6.242l5.809-5.808.848.849-5.95%205.95a1%201%200%2001-1.414%200L7%2012.426l.849-.849%202.98%202.98z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-success-no-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-waiting{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.75%2011.38V6h-1.5v6l4.243%204.243%201.06-1.06-3.803-3.804zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.75%2011.38V6h-1.5v6l4.243%204.243%201.06-1.06-3.803-3.804zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-waiting-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.6%2011.503l3.891%203.891-.848.849L11.4%2012V6h1.2v5.503zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.6%2011.503l3.891%203.891-.848.849L11.4%2012V6h1.2v5.503zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-warn{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-info-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zM11.4%2010h1.2v7h-1.2v-7zm.6-1a1%201%200%20110-2%201%201%200%20010%202z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zM11.4%2010h1.2v7h-1.2v-7zm.6-1a1%201%200%20110-2%201%201%200%20010%202z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-cancel{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M12.849%2012l3.11%203.111-.848.849L12%2012.849l-3.111%203.11-.849-.848L11.151%2012l-3.11-3.111.848-.849L12%2011.151l3.111-3.11.849.848L12.849%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M12.849%2012l3.11%203.111-.848.849L12%2012.849l-3.111%203.11-.849-.848L11.151%2012l-3.11-3.111.848-.849L12%2011.151l3.111-3.11.849.848L12.849%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)}.weui-icon-search{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.31%2015.561l4.114%204.115-.848.848-4.123-4.123a7%207%200%2011.857-.84zM16.8%2011a5.8%205.8%200%2010-11.6%200%205.8%205.8%200%200011.6%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.31%2015.561l4.114%204.115-.848.848-4.123-4.123a7%207%200%2011.857-.84zM16.8%2011a5.8%205.8%200%2010-11.6%200%205.8%205.8%200%200011.6%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-clear{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-back{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm1.999-6.563L10.68%2012%2014%208.562%2012.953%207.5%209.29%2011.277a1.045%201.045%200%20000%201.446l3.663%203.777L14%2015.437z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm1.999-6.563L10.68%2012%2014%208.562%2012.953%207.5%209.29%2011.277a1.045%201.045%200%20000%201.446l3.663%203.777L14%2015.437z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-delete{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.774%206.4l.812%2013.648a.8.8%200%2000.798.752h7.232a.8.8%200%2000.798-.752L17.226%206.4H6.774zm11.655%200l-.817%2013.719A2%202%200%200115.616%2022H8.384a2%202%200%2001-1.996-1.881L5.571%206.4H3.5v-.7a.5.5%200%2001.5-.5h16a.5.5%200%2001.5.5v.7h-2.071zM14%203a.5.5%200%2001.5.5v.7h-5v-.7A.5.5%200%200110%203h4zM9.5%209h1.2l.5%209H10l-.5-9zm3.8%200h1.2l-.5%209h-1.2l.5-9z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.774%206.4l.812%2013.648a.8.8%200%2000.798.752h7.232a.8.8%200%2000.798-.752L17.226%206.4H6.774zm11.655%200l-.817%2013.719A2%202%200%200115.616%2022H8.384a2%202%200%2001-1.996-1.881L5.571%206.4H3.5v-.7a.5.5%200%2001.5-.5h16a.5.5%200%2001.5.5v.7h-2.071zM14%203a.5.5%200%2001.5.5v.7h-5v-.7A.5.5%200%200110%203h4zM9.5%209h1.2l.5%209H10l-.5-9zm3.8%200h1.2l-.5%209h-1.2l.5-9z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-success-no-circle-thin{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.864%2016.617l-5.303-5.303-1.061%201.06%205.657%205.657a1%201%200%20001.414%200L21.238%206.364l-1.06-1.06L8.864%2016.616z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.864%2016.617l-5.303-5.303-1.061%201.06%205.657%205.657a1%201%200%20001.414%200L21.238%206.364l-1.06-1.06L8.864%2016.616z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-arrow{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-arrow-bold{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.157%2012.711L4.5%2018.368l-1.414-1.414%204.95-4.95-4.95-4.95L4.5%205.64l5.657%205.657a1%201%200%20010%201.414z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.157%2012.711L4.5%2018.368l-1.414-1.414%204.95-4.95-4.95-4.95L4.5%205.64l5.657%205.657a1%201%200%20010%201.414z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-back-arrow{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.343%2012l7.071%207.071L9%2020.485l-7.778-7.778a1%201%200%20010-1.414L9%203.515l1.414%201.414L3.344%2012z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.343%2012l7.071%207.071L9%2020.485l-7.778-7.778a1%201%200%20010-1.414L9%203.515l1.414%201.414L3.344%2012z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-back-arrow-thin{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-close{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2010.586l5.657-5.657%201.414%201.414L13.414%2012l5.657%205.657-1.414%201.414L12%2013.414l-5.657%205.657-1.414-1.414L10.586%2012%204.929%206.343%206.343%204.93%2012%2010.586z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2010.586l5.657-5.657%201.414%201.414L13.414%2012l5.657%205.657-1.414%201.414L12%2013.414l-5.657%205.657-1.414-1.414L10.586%2012%204.929%206.343%206.343%204.93%2012%2010.586z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-close-thin{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-back-circle{-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E)}.weui-icon-success{color:#07c160;color:var(--weui-BRAND)}.weui-icon-waiting{color:#10aeff;color:var(--weui-BLUE)}.weui-icon-warn{color:#fa5151;color:var(--weui-RED)}.weui-icon-info{color:#10aeff;color:var(--weui-BLUE)}.weui-icon-success-circle{color:#07c160;color:var(--weui-BRAND)}.weui-icon-success-no-circle,.weui-icon-success-no-circle-thin{color:#07c160;color:var(--weui-BRAND)}.weui-icon-waiting-circle{color:#10aeff;color:var(--weui-BLUE)}.weui-icon-circle{color:rgba(0,0,0,0.3);color:var(--weui-FG-2)}.weui-icon-download{color:#07c160;color:var(--weui-BRAND)}.weui-icon-info-circle{color:rgba(0,0,0,0.3);color:var(--weui-FG-2)}.weui-icon-safe-success{color:#07c160;color:var(--weui-BRAND)}.weui-icon-safe-warn{color:#ffc300;color:var(--weui-YELLOW)}.weui-icon-cancel{color:#fa5151;color:var(--weui-RED)}.weui-icon-search{color:rgba(0,0,0,0.5);color:var(--weui-FG-1)}.weui-icon-clear{color:rgba(0,0,0,0.3);color:var(--weui-FG-2)}.weui-icon-clear:active{color:rgba(0,0,0,0.5);color:var(--weui-FG-1)}.weui-icon-delete.weui-icon_gallery-delete{color:#fff;color:var(--weui-WHITE)}.weui-icon-arrow,.weui-icon-arrow-bold,.weui-icon-back-arrow,.weui-icon-back-arrow-thin{width:12px}.weui-icon-arrow,.weui-icon-arrow-bold{color:rgba(0,0,0,0.3);color:var(--weui-FG-2)}.weui-icon-back-arrow,.weui-icon-back-arrow-thin{color:rgba(0,0,0,0.9);color:var(--weui-FG-0)}.weui-icon-back,.weui-icon-back-circle{color:rgba(0,0,0,0.9);color:var(--weui-FG-0)}.weui-icon_msg{width:64px;height:64px}.weui-icon_msg.weui-icon-warn{color:#fa5151;color:var(--weui-RED)}.weui-icon_msg-primary{width:64px;height:64px}.weui-icon_msg-primary.weui-icon-warn{color:#ffc300;color:var(--weui-YELLOW)}.weui-textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:transparent;display:block;border:0;resize:none;width:100%;color:inherit;font-size:1em;line-height:inherit;outline:0}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-media-box{padding:16px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid rgba(0,0,0,0.1);border-top:1px solid var(--weui-FG-3);color:rgba(0,0,0,0.1);color:var(--weui-FG-3);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);left:16px}.weui-media-box:first-child:before{display:none}a.weui-media-box{color:#000;-webkit-tap-highlight-color:rgba(0,0,0,0)}a.weui-media-box:active{background-color:#ececec;background-color:var(--weui-BG-COLOR-ACTIVE)}.weui-media-box__title{font-weight:400;font-size:17px;line-height:1.4;color:rgba(0,0,0,0.9);color:var(--weui-FG-0);width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:rgba(0,0,0,0.3);color:var(--weui-FG-2);font-size:14px;line-height:1.4;padding-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:16px;padding-bottom:4px;font-size:13px;color:rgba(0,0,0,0.3);color:var(--weui-FG-2);line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid rgba(0,0,0,0.3);border-left:1px solid var(--weui-FG-2)}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box_appmsg .weui-media-box__hd{margin-right:16px;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box_appmsg .weui-media-box__thumb{width:100%;max-height:100%;vertical-align:top}.weui-media-box_appmsg .weui-media-box__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-media-box_small-appmsg .weui-cells{margin-top:0}.weui-media-box_small-appmsg .weui-cells:before{display:none}.weui-btn{position:relative;display:block;width:184px;margin-left:auto;margin-right:auto;padding:8px 24px;box-sizing:border-box;font-weight:700;font-size:17px;text-align:center;text-decoration:none;color:#fff;line-height:1.41176471;border-radius:4px;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}.weui-btn_block{width:auto}.weui-btn_inline{display:inline-block}.weui-btn_default{color:#06ae56;color:var(--weui-BTN-DEFAULT-COLOR);background-color:#f2f2f2;background-color:var(--weui-BTN-DEFAULT-BG)}.weui-btn_default:not(.weui-btn_disabled):visited{color:#06ae56;color:var(--weui-BTN-DEFAULT-COLOR)}.weui-btn_default:not(.weui-btn_disabled):active{background-color:#e6e6e6;background-color:var(--weui-BTN-DEFAULT-ACTIVE-BG)}.weui-btn_primary{background-color:#07c160;background-color:var(--weui-BRAND)}.weui-btn_primary:not(.weui-btn_disabled):visited{color:#fff}.weui-btn_primary:not(.weui-btn_disabled):active{background-color:#06ae56;background-color:var(--weui-TAG-TEXT-GREEN)}.weui-btn_warn{color:#fa5151;color:var(--weui-RED);background-color:#f2f2f2;background-color:var(--weui-BTN-DEFAULT-BG)}.weui-btn_warn:not(.weui-btn_disabled):visited{color:#fa5151;color:var(--weui-RED)}.weui-btn_warn:not(.weui-btn_disabled):active{background-color:#e6e6e6;background-color:var(--weui-BTN-DEFAULT-ACTIVE-BG)}.weui-btn_disabled{color:rgba(0,0,0,0.2);color:var(--weui-BTN-DISABLED-FONT-COLOR);background-color:#f2f2f2;background-color:var(--weui-BTN-DEFAULT-BG)}.weui-btn_loading .weui-loading{margin:-0.2em .34em 0 0}.weui-btn_loading.weui-btn_primary{background-color:#06ae56;background-color:var(--weui-TAG-TEXT-GREEN);color:#fff;color:var(--weui-WHITE)}.weui-btn_loading.weui-btn_default{background-color:#e6e6e6;background-color:var(--weui-BTN-DEFAULT-ACTIVE-BG)}.weui-btn_loading.weui-btn_warn{background-color:#e6e6e6;background-color:var(--weui-BTN-DEFAULT-ACTIVE-BG)}.weui-btn_cell{position:relative;display:block;margin-left:auto;margin-right:auto;box-sizing:border-box;font-weight:700;font-size:17px;text-align:center;text-decoration:none;color:#fff;line-height:1.41176471;padding:16px;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;background-color:#fff;background-color:var(--weui-BG-5)}.weui-btn_cell+.weui-btn_cell{margin-top:16px}.weui-btn_cell:active{background-color:#ececec;background-color:var(--weui-BG-COLOR-ACTIVE)}.weui-btn_cell__icon{display:inline-block;vertical-align:middle;width:24px;height:24px;margin:-0.2em .34em 0 0}.weui-btn_cell-default{color:rgba(0,0,0,0.9);color:var(--weui-FG-0)}.weui-btn_cell-primary{color:#576b95;color:var(--weui-LINK)}.weui-btn_cell-warn{color:#fa5151;color:var(--weui-RED)}button.weui-btn,input.weui-btn{border-width:0;outline:0;-webkit-appearance:none}button.weui-btn:focus,input.weui-btn:focus{outline:0}button.weui-btn_inline,input.weui-btn_inline,button.weui-btn_mini,input.weui-btn_mini{width:auto}.weui-btn_mini{display:inline-block;width:auto;padding:0 .75em;line-height:2;font-size:16px}.weui-btn:not(.weui-btn_mini)+.weui-btn:not(.weui-btn_mini){margin-top:16px}.weui-btn.weui-btn_inline+.weui-btn.weui-btn_inline{margin-top:auto;margin-left:16px}.weui-btn-area{margin:48px 16px 8px}.weui-btn-area_inline{display:-webkit-box;display:-webkit-flex;display:flex}.weui-btn-area_inline .weui-btn{margin-top:auto;margin-right:16px;width:100%;-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn-area_inline .weui-btn:last-child{margin-right:0}.weui-btn_reset{background:transparent;border:0;padding:0;outline:0}.weui-btn_icon{font-size:0}.weui-btn_icon:active [class*="weui-icon-"]{color:rgba(0,0,0,0.5);color:var(--weui-FG-1)}.weui-btn_plain-primary{color:#07c160;border:1px solid #07c160}.weui-btn_plain-primary:not(.weui-btn_plain-disabled):active{color:#06ae56;background-color:rgba(0,0,0,0.1)}.weui-btn_plain-primary:after{border-width:0}.weui-btn_plain-default{color:#353535;border:1px solid #353535}.weui-btn_plain-default:not(.weui-btn_plain-disabled):active{color:#323232;background-color:rgba(0,0,0,0.1)}.weui-btn_plain-default:after{border-width:0}.weui-btn_plain-disabled{color:rgba(0,0,0,0.2);background-color:transparent}.preview_appmsg .rich_media_title{margin-top:1.5em}.preview_appmsg .account_info{padding-top:3em}.original_page{background-color:transparent}.account_info{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;padding-bottom:16px;font-size:16px}.account_info.appmsg_account_info{padding-bottom:32px}.account_info .radius_avatar img{background-color:transparent}.share_notice{font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.original_panel .original_account_avatar{width:30px;height:30px}.original_panel_tool{font-size:14px}.original_panel_tool a{color:#576b95}.original_panel_content{opacity:.90;font-size:14px;line-height:22px;color:#000}.share_media{padding-bottom:30px}.icon_appmsg_tag{display:inline-block;vertical-align:middle;padding:0 .5em;font-size:12px;line-height:1.67;background-color:#c3c3c3;color:#fff;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;max-width:70%}.icon_appmsg_tag.primary{color:#3bb638;padding:4px .78em;background-color:rgba(9,187,7,0.08);font-size:12px;border-top-left-radius:.95em 50%;-moz-border-radius-topleft:.95em 50%;-webkit-border-top-left-radius:.95em 50%;border-top-right-radius:.95em 50%;-moz-border-radius-topright:.95em 50%;-webkit-border-top-right-radius:.95em 50%;border-bottom-left-radius:.95em 50%;-moz-border-radius-bottomleft:.95em 50%;-webkit-border-bottom-left-radius:.95em 50%;border-bottom-right-radius:.95em 50%;-moz-border-radius-bottomright:.95em 50%;-webkit-border-bottom-right-radius:.95em 50%}.icon_appmsg_tag.default{border:1px solid rgba(0,0,0,0.1);color:rgba(0,0,0,0.3);background-color:transparent;padding:0 .54em;font-size:15px;line-height:1.3;border-top-left-radius:.67em 50%;-moz-border-radius-topleft:.67em 50%;-webkit-border-top-left-radius:.67em 50%;border-top-right-radius:.67em 50%;-moz-border-radius-topright:.67em 50%;-webkit-border-top-right-radius:.67em 50%;border-bottom-left-radius:.67em 50%;-moz-border-radius-bottomleft:.67em 50%;-webkit-border-bottom-left-radius:.67em 50%;border-bottom-right-radius:.67em 50%;-moz-border-radius-bottomright:.67em 50%;-webkit-border-bottom-right-radius:.67em 50%}.rich_media_meta_list .icon_appmsg_tag.default{margin-top:-1px}.icon_appmsg_tag.title_tag{background-color:#d04b4e}.icon_appmsg_tag.appmsg_title_tag{background:#f2f2f2;color:rgba(0,0,0,0.3);padding:0 4px}.icon_global_tag_wrp{text-align:right;padding-bottom:12px}.icon_global_tag{background-color:rgba(118,118,118,0.16);color:rgba(0,0,0,0.41);line-height:2.2;border-top-left-radius:1em 50%;-moz-border-radius-topleft:1em 50%;-webkit-border-top-left-radius:1em 50%;border-bottom-left-radius:1em 50%;-moz-border-radius-bottomleft:1em 50%;-webkit-border-bottom-left-radius:1em 50%;padding:0 1.8em 0 1.34em;font-size:12px;margin-right:-24px;display:inline-block;vertical-align:top}.global_plain_btn{display:inline-block;vertical-align:middle;padding:0 1em;line-height:2;font-size:14px;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}.global_plain_btn.primary{color:#1aad19;border:1px solid currentColor}.global_plain_btn.primary:active{color:rgba(26,173,25,0.6)}.wx_video_context{color:#fefefe;position:relative;background-color:#000}.wx_video_thumb,.wx_video_thumb_primary{position:absolute;left:0;width:100%;height:100%!important;top:0}.wx_video_thumb_primary{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}.wx_video_play_btn{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:0;border-width:0;background-color:transparent;padding:0;outline:0;z-index:2;width:48px;height:48px;background:rgba(237,237,237,0.9);border-radius:50%;text-align:center}.wx_video_play_btn:before{content:"";display:inline-block;width:28px;height:28px;vertical-align:middle;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cpath fill='%23151515' fill-rule='evenodd' d='M9.524 4.938l10.092 6.21a1 1 0 0 1 0 1.704l-10.092 6.21A1 1 0 0 1 8 18.21V5.79a1 1 0 0 1 1.524-.852z'/%3E%3C/svg%3E")}.wx_video_mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:rgba(0,0,0,0.5)}.wx_video_loading{position:absolute;left:50%;top:50%;margin-top:-20px;margin-left:-20px;width:40px;height:40px;z-index:2;background:transparent url() 0 0 no-repeat;background-size:100%;-webkit-animation:loading 1000ms steps(60,end) 0ms infinite;animation:loading 1000ms steps(60,end) 0ms infinite}@-webkit-keyframes loading{0%{-webkit-transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg)}}@keyframes loading{0%{-webkit-transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg)}}.place_audio_area{min-height:100px;background-color:#fdfdfd;display:block;margin:16px 0}.place_music_area{min-height:68px;background-color:#fdfdfd;display:block;margin:17px 0 16px}.rich_media_empty_extra{background-color:#fafafa}.appmsg_skin_default.rich_media_empty_extra{background-color:#fff}.appmsg_skin_default .rich_media_area_primary{background-color:#fff}.appmsg_skin_default .rich_media_area_primary .weui-loadmore_line .weui-loadmore__tips{background-color:#fff}.appmsg_style_default .rich_media_tool{padding-top:15px}.rich_media_title_ios{font-weight:700}.my_comment_empty_data{background-color:#fff}.read-more__area{margin:30px 0}.read-more__desc{margin-bottom:10px}.read-more__article__extra{font-size:14px;color:rgba(0,0,0,0.5)}.read-more__article__item{margin-bottom:10px}.original_panel_tips{font-size:12px;color:#fff;line-height:20px;font-weight:normal;vertical-align:2px;padding:0 4px;border-radius:2px;display:inline-block;background-color:rgba(0,0,0,0.2)}.original_panel_tips2{font-size:12px;color:rgba(0,0,0,0.3);line-height:20px;font-weight:normal;vertical-align:2px;padding:0 4px;border-radius:2px;display:inline-block;background-color:rgba(0,0,0,0.05)}@font-face{font-family:"WeChatSansStd-Medium";src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMmsyak0AAACsAAAAYGNtYXAVQx11AAABDAAAAWJnbHlmfLj7WQAAAnAAAARAaGVhZA/uXt4AAAawAAAANmhoZWEFsgG+AAAG6AAAACRobXR4G1wCswAABwwAAAA2bG9jYQfwBtgAAAdEAAAAHm1heHAAEgA2AAAHZAAAACBuYW1lNeaNfgAAB4QAAAUtcG9zdLTpTnoAAAy0AAAARgAEAhsB9AAFAAgCigJYAAAASwKKAlgAAAFeADIBMAAAAAAGAAAAAAAAAAAAAAEQAAAAAAAAAAAAAABITllJAAAAJP/lA4T/MwAAA4QAzQAAAQAAAAAAAfsCyAAAACAAAgAAAAMAAAADAAAAHAABAAAAAABcAAMAAQAAABwABABAAAAADAAIAAIABAAkAC4AOf/l/////wAAACQALgAw/+X//////+j/3f/RACgAAQABAAAAAAAAAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAsAAQIDBAUGBwgJCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIASAAAAhACyAADAAcAABMhESElESERSAHI/jgBdP7gAsj9OE0CLv3SAAAAAgBA//IB9QLWAA0AFwAAFiY9ATQ2MzIWHQEUBiM2PQE0IyIdARQzrm5ubWxubmxtbW1tDpqYhJaYmJaEmJpoxozCwozGAAAAAQALAAABOgLIAAYAABMHJzczESPMhTzKZW4CO2NWmv04AAAAAQA9AAAB/ALWABkAADcTPgE1NCYjIgYHJz4BMzIeARUUBg8BIRUhPfYwJjotK0cYWiJ2UTpfNzI+sgEn/kFTARE2USUpND02MVBbMlg3Nm9Ex2UAAQA4//ICBQLIAB0AADceATMyNjU0JiMiBzU3IzUhFQc2HgEVFA4BIyImJ4wZRyk5SU9GKSWb/QGLqz1gNjxrRUZ1Jq0nK0c1PDwIW71pWMcDMWBDQmk7QjwAAAACABgAAAIQAsgACgANAAAlITUBMxEzFSMVIzURAwFP/skBLXdUVG3CmUQB6/4oV5nwAUD+wAAAAAEAMf/yAgQCyAAeAAAWJic3HgEzMjY1NCYjIgcjESEVIRU2MzIeARUUDgEjz3klWRNLKjtMSThBL1EBgP7tLkU7XTU8bEUOSUI1KTJMPDlKNQGbZL8fOWdCRm09AAAAAAIANf/yAgUCyAATAB8AABYuATU0NjcTMwM2MzIeARUUDgEjPgE1NCYjIgYVFBYz3Go9HSepdaUcIj1hNzxqQTRGRjQ1RkY1DjxoQCVQRQE4/tsROWY/QGg8Y0k3N0pJODdJAAABACYAAAHUAsgABgAAASE1IRUDIwFc/soBrulzAmRkVf2NAAADAC//8gIHAtYAGwAnADMAABYuATU0NjcuATU0PgEzMh4BFRQGBx4BFRQOASMSNjU0JiMiBhUUFjMSNjU0JiMiBhUUFjPYaz5GNC04OGI9PGE4OCw1Rj5sQi48PS0vPT0vNkhJNTZJSDcONl87RmIUFkw1NlgzM1g2NUsXFmFFO182Abo5LSs3NystOf6oRDQ2SUk2NEQAAAIANQAAAgUC1gATAB8AAAEGIyIuATU0PgEzMh4BFRQGBwMjEjY1NCYjIgYVFBYzAUgcIj1hNzxqQkFqPR0mqnWvRkY1NUVGNAElETlmP0BoPDxoQCRQRv7IAXJJODdJSTc4SQABAFMAAADBAG0AAwAANzUzFVNuAG1tAAABAFD/twIJAwYAKQAAJAYHFSM1Jic3HgEzMjY1NCYnLgE1NDY3NTMVFhcHLgEjIgYVFBYXHgEVAglVSG1nSEYcSio0QDk7ZmNZSW1WPEcfPiMvPjg7aWOCZBFWUQ1KSh0hMCgkMBIeX0tMZQ1XWBRJQyIgMSgkLxIeX0oAAQAzAAACIQK6ABYAAAEzFSMVMxUjFSM1IzUzNSM1MwMzGwEzAX12k5OTbZOTk3ajdYKCdQFZUjlSfHxSOVIBYf7MATQAAAAAAQAAAAEAAGOe0lxfDzz1AAMD6AAAAADVtvhtAAAAANj0ItAAC/+3AiEDBgAAAAcAAgAAAAAAAAABAAADhP8zAAACWAALACUCIQABAAAAAAAAAAAAAAAAAAAADQJYAEgCNQBAAboACwI1AD0CNQA4AjUAGAI1ADECNQA1AgEAJgI1AC8CNQA1ARYAUwJYAFAAMwAAAAAAFgA6AEwAdgCkAMAA8AEiATQBgAGyAb4B/AIgAAAAAQAAAA4ANAADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAABwBVgABAAAAAAAAADMAAAABAAAAAAABABYAMwABAAAAAAACAAcASQABAAAAAAADACoAUAABAAAAAAAEABYAegABAAAAAAAFAAwAkAABAAAAAAAGABYAnAABAAAAAAAHACYAsgABAAAAAAAIAAsA2AABAAAAAAAJACMA4wABAAAAAAALABgBBgABAAAAAAAQAA8BHgABAAAAAAARAAYBLQABAAAAAAATABgBMwADAAEECQAAAGYBSwADAAEECQABACwBsQADAAEECQACAA4B3QADAAEECQADAFQB6wADAAEECQAEACwCPwADAAEECQAFABgCawADAAEECQAGACwCgwADAAEECQAHAEwCrwADAAEECQAIABYC+wADAAEECQAJAEYDEQADAAEECQALADADVwADAAEECQAQAB4DhwADAAEECQARAAwDpQADAAEECQATACYDsUNvcHlyaWdodCAoYykgMjAxNyBieSBUZW5jZW50LiBBbGwgcmlnaHRzIHJlc2VydmVkLldlQ2hhdCBTYW5zIFN0ZCBNZWRpdW1SZWd1bGFySGFueWkgV2VDaGF0IFNhbnMgU3RkLU1lZGl1bTsgVmVyc2lvbiAxLjAwV2VDaGF0IFNhbnMgU3RkLU1lZGl1bVZlcnNpb24gMS4wMFdlQ2hhdC1TYW5zLVN0ZC1NZWRpdW1XZUNoYXQgU2FucyBpcyBhIHRyYWRlbWFyayBvZiBUZW5jZW50LkhhbnlpIEZvbnRzWkhBTkcgWHVhbiwgV0FORyBUaWFuYmksIExJVSBYaWFveXVodHRwOi8vd3d3LmhhbnlpLmNvbS5jbi9XZUNoYXQgU2FucyBTdGRNZWRpdW0gwqzCoiTCoyDCqcKlCjEyMzQ1Njc4OTAAQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAxADcAIABiAHkAIABUAGUAbgBjAGUAbgB0AC4AIABBAGwAbAAgAHIAaQBnAGgAdABzACAAcgBlAHMAZQByAHYAZQBkAC4AVwBlAEMAaABhAHQAIABTAGEAbgBzACAAUwB0AGQAIABNAGUAZABpAHUAbQBSAGUAZwB1AGwAYQByAEgAYQBuAHkAaQAgAFcAZQBDAGgAYQB0ACAAUwBhAG4AcwAgAFMAdABkAC0ATQBlAGQAaQB1AG0AOwAgAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwAFcAZQBDAGgAYQB0ACAAUwBhAG4AcwAgAFMAdABkAC0ATQBlAGQAaQB1AG0AVgBlAHIAcwBpAG8AbgAgADEALgAwADAAVwBlAEMAaABhAHQALQBTAGEAbgBzAC0AUwB0AGQALQBNAGUAZABpAHUAbQBXAGUAQwBoAGEAdAAgAFMAYQBuAHMAIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABUAGUAbgBjAGUAbgB0AC4ASABhAG4AeQBpACAARgBvAG4AdABzAFoASABBAE4ARwAgAFgAdQBhAG4ALAAgAFcAQQBOAEcAIABUAGkAYQBuAGIAaQAsACAATABJAFUAIABYAGkAYQBvAHkAdQBoAHQAdABwADoALwAvAHcAdwB3AC4AaABhAG4AeQBpAC4AYwBvAG0ALgBjAG4ALwBXAGUAQwBoAGEAdAAgAFMAYQBuAHMAIABTAHQAZABNAGUAZABpAHUAbQAgAKwAogAkAKMAIACpAKUACgAxADIAMwA0ADUANgA3ADgAOQAwAAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAA4ADgAAABMAFAAVABYAFwAYABkAGgAbABwAEQAHAQIHdW5pRkZFNQAA) format("truetype")}.rich_media_wrp{position:relative}.pay button{width:182px;height:40px;line-height:40px;background-color:#fa9d3b;color:#fff;font-size:17px;border:0;border-radius:4px;font-weight:500;position:relative;outline:0;font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pay button .price{font-family:"WeChatSansStd-Medium"}.pay button:not(.btn_disabled):active::after{content:"";position:absolute;left:0;right:0;bottom:0;top:0;background-color:rgba(0,0,0,0.1)}.pay button.btn_disabled{background-color:#f2f2f2;color:rgba(0,0,0,0.18)}.pay__mask{position:absolute;width:100%;left:0;bottom:0;text-align:center}.pay__notice{visibility:hidden;opacity:0;padding:16px;width:100%;box-sizing:border-box;position:fixed;bottom:0;background:#f4f4f4;padding-bottom:calc(16px + constant(safe-area-inset-bottom));padding-bottom:calc(16px + env(safe-area-inset-bottom));z-index:100;-webkit-transition:all .3s;transition:all .3s}.pay__notice button.btn_disabled{background-color:#fff}.pay__notice_show{visibility:visible;opacity:1}.pay__notice-intro{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:top;-webkit-align-items:top;align-items:top}.pay__intro-content{-webkit-box-flex:1;-webkit-flex:1;flex:1;font-size:14px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.pay__intro-content .pay__notice-desc{font-size:12px;color:rgba(0,0,0,0.3);line-height:17px}.pay__notice-title{line-height:20px;font-size:17px}.pay__notice-main{color:rgba(0,0,0,0.3);padding-right:30px;font-size:17px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:54px}.pay__notice-close{position:absolute;right:0;top:0;padding:16px;font-size:0}.pay__notice-close::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:24px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Cpath id='c4adbcb4-e5f6-47ae-8835-e10a689c1c34-a' d='M8 6.943L1.807.75.75 1.807 6.943 8 .75 14.193l1.057 1.057L8 9.057l6.193 6.193 1.057-1.057L9.057 8l6.193-6.193L14.193.75z'/%3E  %3C/defs%3E  %3Cuse fill-opacity='.9' fill-rule='evenodd' opacity='.3' transform='translate(4 4)' xlink:href='%23c4adbcb4-e5f6-47ae-8835-e10a689c1c34-a'/%3E%3C/svg%3E")}.pay__worth{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;background-color:transparent;border:0;display:inline-block;vertical-align:middle;padding:0;font-size:15px;line-height:2.13333333;color:#576b95}.pay__worth::before{content:"";display:inline-block;margin-top:-0.25em;vertical-align:middle;width:20px;height:20px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h20v20H0z'/%3E    %3Cg transform='translate(1.667 3.333)'%3E      %3Cpath stroke='%23576B95' stroke-width='.833' d='M1.963 6.053h-.707c-.417 0-.84.434-.84.944v6.518c0 .488.429 1.17.7 1.17h9.304c.63 0 1.498-.764 2.057-1.945l.139-.288a25.38 25.38 0 0 0 .848-1.975c.372-.98.658-1.932.827-2.82.025-.13.047-.26.067-.387.142-.926-.626-1.704-1.245-1.704h-4.3l.021-.436c.007-.137.023-.28.05-.467l.078-.507c.08-.542.12-.993.12-1.546 0-1.223-.684-2.045-1.52-2.17-.835-.124-1.525.192-1.525.731 0 1.51-.166 2.366-.89 3.567-.335.556-.832.927-1.436 1.138a3.983 3.983 0 0 1-1.659.19c-.068-.006-.12-.013-.089-.013z'/%3E      %3Cpath fill='%23576B95' d='M2.332 6.079h1v8.471h-1z'/%3E    %3C/g%3E    %3Cpath stroke='%23576B95' stroke-width='.667' d='M13.189 4.167c.425.174.79.412 1.094.716.304.304.543.67.717 1.095a3.29 3.29 0 0 1 .717-1.095 3.29 3.29 0 0 1 1.094-.716 3.29 3.29 0 0 1-1.094-.717A3.29 3.29 0 0 1 15 2.356a3.29 3.29 0 0 1-.717 1.094 3.29 3.29 0 0 1-1.094.717z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__worth_ed::before{display:inline-block;vertical-align:middle;width:20px;height:20px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h20v20H0z'/%3E    %3Cg transform='translate(1.667 3.333)'%3E      %3Cpath fill='%23576B95' stroke='%23576B95' stroke-width='.833' d='M1.963 6.053h-.707c-.417 0-.84.434-.84.944v6.518c0 .488.429 1.17.7 1.17h9.304c.63 0 1.498-.764 2.057-1.945l.139-.288a25.38 25.38 0 0 0 .848-1.975c.372-.98.658-1.932.827-2.82.025-.13.047-.26.067-.387.142-.926-.626-1.704-1.245-1.704h-4.3l.021-.436c.007-.137.023-.28.05-.467l.078-.507c.08-.542.12-.993.12-1.546 0-1.223-.684-2.045-1.52-2.17-.835-.124-1.525.192-1.525.731 0 1.51-.166 2.366-.89 3.567-.335.556-.832.927-1.436 1.138a3.983 3.983 0 0 1-1.659.19c-.068-.006-.12-.013-.089-.013z'/%3E      %3Crect width='1.11' height='8.471' x='2.332' y='6.079' fill='%23FFF' rx='.555'/%3E    %3C/g%3E    %3Cpath fill='%23576B95' stroke='%23576B95' stroke-width='.667' d='M13.189 4.167c.425.174.79.412 1.094.716.304.304.543.67.717 1.095a3.29 3.29 0 0 1 .717-1.095 3.29 3.29 0 0 1 1.094-.716 3.29 3.29 0 0 1-1.094-.717A3.29 3.29 0 0 1 15 2.356a3.29 3.29 0 0 1-.717 1.094 3.29 3.29 0 0 1-1.094.717z'/%3E  %3C/g%3E%3C/svg%3E")}.unpay__tag{background-color:#fa9d3b;color:#fff;border-radius:2px;font-size:12px;padding:2px 6px;line-height:17px;vertical-align:middle;margin-top:-2.5px;display:inline-block;margin-left:8px;font-weight:normal}.pay__tag{background-color:rgba(250,157,59,0.1);color:#fa9d3b;border-radius:2px;font-size:12px;padding:2px 6px;line-height:17px;vertical-align:middle;margin-top:-2.5px;display:inline-block;margin-left:8px;font-weight:normal}.pay_disabled .pay__worth{color:rgba(0,0,0,0.5)}.pay_disabled .pay__worth::before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E  %3Cg fill='none' fill-rule='evenodd' opacity='.5'%3E    %3Cpath d='M0 0h20v20H0z'/%3E    %3Cg transform='translate(1.667 3.333)'%3E      %3Cpath stroke='%23000' stroke-width='.833' d='M1.963 6.053h-.707c-.417 0-.84.434-.84.944v6.518c0 .488.429 1.17.7 1.17h9.304c.63 0 1.498-.764 2.057-1.945l.139-.288a25.38 25.38 0 0 0 .848-1.975c.372-.98.658-1.932.827-2.82.025-.13.047-.26.067-.387.142-.926-.626-1.704-1.245-1.704h-4.3l.021-.436c.007-.137.023-.28.05-.467l.078-.507c.08-.542.12-.993.12-1.546 0-1.223-.684-2.045-1.52-2.17-.835-.124-1.525.192-1.525.731 0 1.51-.166 2.366-.89 3.567-.335.556-.832.927-1.436 1.138a3.983 3.983 0 0 1-1.659.19c-.068-.006-.12-.013-.089-.013z'/%3E      %3Cpath fill='%23000' d='M2.332 6.079h1v8.471h-1z'/%3E    %3C/g%3E    %3Cpath stroke='%23000' stroke-width='.667' d='M13.189 4.167c.425.174.79.412 1.094.716.304.304.543.67.717 1.095a3.29 3.29 0 0 1 .717-1.095 3.29 3.29 0 0 1 1.094-.716 3.29 3.29 0 0 1-1.094-.717A3.29 3.29 0 0 1 15 2.356a3.29 3.29 0 0 1-.717 1.094 3.29 3.29 0 0 1-1.094.717z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__detail-wrp_inner{padding-bottom:48px;margin-bottom:-15px;overflow:hidden}.pay__detail{text-align:center;border-radius:4px;position:relative;margin:0 auto}.pay__detail-head{line-height:72px;font-weight:500;font-size:17px;display:-webkit-box;display:-webkit-flex;display:flex;position:relative}.pay__detail-head::after{content:"";display:block;position:absolute;left:0;bottom:0;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transform:scaleY(0.5);transform:scaleY(0.5);width:100%;-webkit-transform-origin:left bottom;transform-origin:left bottom}.pay__detail-title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.pay__detail-wall{font-size:0;margin-right:-8px}.pay__detail-wall .pay__avatar-wrp{display:inline-block;width:32px;height:32px;margin-right:8px;margin-bottom:8px;position:relative;vertical-align:top}.pay__detail-wall .pay__avatar-wrp img{width:100%;border-radius:2px;height:100%}.pay__tag-reward{display:inline-block;vertical-align:middle;width:14px;height:14px;background-size:cover;background-image:url("");position:absolute;right:-5px;bottom:-3px}.pay__detail-wall-wrp{line-height:1;margin:0 auto;max-width:100%}.pay__detail-summary{display:inline-block;margin-bottom:16px;line-height:20px;font-size:14px;position:relative;background-color:#fff}.pay__detail-summary a{padding:0 10px;margin:0 -10px}.pay__detail-summary:before,.pay__detail-summary:after{content:"";display:block;position:absolute;width:48px;top:50%;-webkit-transform:translateY(-50%) scaleY(0.5);transform:translateY(-50%) scaleY(0.5);border-top:1px solid rgba(0,0,0,0.1)}.pay__detail-summary:before{left:-64px}.pay__detail-summary:after{right:-64px}.pay__detail-rate{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.pay__detail-rate-item{width:48px;height:48px;background-color:rgba(255,255,255,0.5);border-radius:50%;margin-right:24px;position:relative}.pay__detail-rate-item:last-child{margin-right:0}.pay__rate-positive::before{content:"";position:absolute;display:inline-block;left:13px;top:11px;width:24px;height:24px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h24v24H0z'/%3E    %3Cg transform='translate(2 4)'%3E      %3Cpath stroke='%23576B95' d='M2.356 7.264h-.848c-.5 0-1.008.52-1.008 1.133v7.821c0 .586.514 1.404.84 1.404h11.163c.756 0 1.799-.916 2.47-2.334l.166-.345a30.455 30.455 0 0 0 1.017-2.37c.447-1.178.79-2.32.993-3.384.03-.158.057-.313.08-.465.17-1.112-.75-2.045-1.494-2.045h-5.158l.024-.523a5.69 5.69 0 0 1 .06-.56c.015-.107.08-.518.093-.609.097-.65.145-1.192.145-1.854 0-1.469-.821-2.455-1.824-2.604-1.003-.15-1.83.23-1.83.876 0 1.813-.2 2.84-1.069 4.28-.402.668-.998 1.113-1.723 1.366a4.78 4.78 0 0 1-1.99.228c-.082-.007-.144-.015-.107-.015z'/%3E      %3Cpath fill='%23576B95' d='M2.799 7.295h1V17.46h-1z'/%3E    %3C/g%3E    %3Cpath stroke='%23576B95' stroke-width='.8' d='M15.827 5c.51.209.948.495 1.313.86s.651.803.86 1.313a3.95 3.95 0 0 1 .86-1.313A3.948 3.948 0 0 1 20.173 5a3.948 3.948 0 0 1-1.313-.86A3.948 3.948 0 0 1 18 2.827a3.95 3.95 0 0 1-.86 1.313 3.948 3.948 0 0 1-1.313.86z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__rate-positive.active::before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h24v24H0z'/%3E    %3Cg transform='translate(2 4)'%3E      %3Cpath fill='%23576B95' stroke='%23576B95' d='M2.356 7.264h-.848c-.5 0-1.008.52-1.008 1.133v7.821c0 .586.514 1.404.84 1.404h11.163c.756 0 1.799-.916 2.47-2.334l.166-.345a30.455 30.455 0 0 0 1.017-2.37c.447-1.178.79-2.32.993-3.384.03-.158.057-.313.08-.465.17-1.112-.75-2.045-1.494-2.045h-5.158l.024-.523a5.69 5.69 0 0 1 .06-.56c.015-.107.08-.518.093-.609.097-.65.145-1.192.145-1.854 0-1.469-.821-2.455-1.824-2.604-1.003-.15-1.83.23-1.83.876 0 1.813-.2 2.84-1.069 4.28-.402.668-.998 1.113-1.723 1.366a4.78 4.78 0 0 1-1.99.228c-.082-.007-.144-.015-.107-.015z'/%3E      %3Cpath fill='%23FFF' d='M2.799 7.295h1V17.46h-1z'/%3E    %3C/g%3E    %3Cpath fill='%23576B95' stroke='%23576B95' stroke-width='.8' d='M15.827 5c.51.209.948.495 1.313.86s.651.803.86 1.313a3.95 3.95 0 0 1 .86-1.313A3.948 3.948 0 0 1 20.173 5a3.948 3.948 0 0 1-1.313-.86A3.948 3.948 0 0 1 18 2.827a3.95 3.95 0 0 1-.86 1.313 3.948 3.948 0 0 1-1.313.86z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__rate-negative::before{content:"";position:absolute;display:inline-block;left:14px;top:15px;width:24px;height:24px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='matrix(1 0 0 -1 0 24)'%3E    %3Cpath d='M0 0h24v24H0z'/%3E    %3Cg transform='translate(2 4)'%3E      %3Cpath stroke='%23576B95' d='M2.356 7.264h-.848c-.5 0-1.008.52-1.008 1.133v7.821c0 .586.514 1.404.84 1.404h11.163c.756 0 1.799-.916 2.47-2.334l.166-.345a30.455 30.455 0 0 0 1.017-2.37c.447-1.178.79-2.32.993-3.384.03-.158.057-.313.08-.465.17-1.112-.75-2.045-1.494-2.045h-5.158l.024-.523a5.69 5.69 0 0 1 .06-.56c.015-.107.08-.518.093-.609.097-.65.145-1.192.145-1.854 0-1.469-.821-2.455-1.824-2.604-1.003-.15-1.83.23-1.83.876 0 1.813-.2 2.84-1.069 4.28-.402.668-.998 1.113-1.723 1.366a4.78 4.78 0 0 1-1.99.228c-.082-.007-.144-.015-.107-.015z'/%3E      %3Cpath fill='%23576B95' d='M2.799 7.295h1V17.46h-1z'/%3E    %3C/g%3E  %3C/g%3E%3C/svg%3E")}.pay__rate-negative.active::before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='matrix(1 0 0 -1 0 24)'%3E    %3Cpath d='M0 0h24v24H0z'/%3E    %3Cg transform='translate(2 4)'%3E      %3Cpath fill='%23576B95' stroke='%23576B95' d='M2.356 7.264h-.848c-.5 0-1.008.52-1.008 1.133v7.821c0 .586.514 1.404.84 1.404h11.163c.756 0 1.799-.916 2.47-2.334l.166-.345a30.455 30.455 0 0 0 1.017-2.37c.447-1.178.79-2.32.993-3.384.03-.158.057-.313.08-.465.17-1.112-.75-2.045-1.494-2.045h-5.158l.024-.523a5.69 5.69 0 0 1 .06-.56c.015-.107.08-.518.093-.609.097-.65.145-1.192.145-1.854 0-1.469-.821-2.455-1.824-2.604-1.003-.15-1.83.23-1.83.876 0 1.813-.2 2.84-1.069 4.28-.402.668-.998 1.113-1.723 1.366a4.78 4.78 0 0 1-1.99.228c-.082-.007-.144-.015-.107-.015z'/%3E      %3Cpath fill='%23FFF' d='M2.799 7.295h1V17.46h-1z'/%3E    %3C/g%3E  %3C/g%3E%3C/svg%3E")}.pay__summary{padding:16px 32px 48px;color:rgba(0,0,0,0.5)}.pay__summary-head{font-weight:500;line-height:22.4px;margin-bottom:12px;font-size:17px}.pay__empty-notice{color:rgba(0,0,0,0.3);text-align:center;margin:110px 0 57px}.pay__summary-content{line-height:28px;white-space:pre-wrap;font-size:17px}.pay__detail-wrp_v2 .pay__detail-wall{display:inline-block;text-align:left}.pay__detail-wrp_v2 .pay__detail-wall .pay__avatar-wrp{margin-right:8px}.pay__worth-action{text-align:center}.pay__icon-worth{display:inline-block;width:48px;height:48px;border-radius:50%;position:relative;background-color:rgba(0,0,0,0.02)}.pay__icon-worth::before{content:"";left:11px;top:9px;position:absolute;display:inline-block;vertical-align:middle;width:28px;height:28px;background-size:cover;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h28v28H0z'/%3E    %3Cg transform='translate(2.333 4.667)'%3E      %3Cpath stroke='%23576B95' stroke-width='1.167' d='M2.748 8.475H1.76c-.584 0-1.176.606-1.176 1.321v9.125c0 .683.6 1.638.98 1.638h13.024c.882 0 2.099-1.069 2.881-2.723l.194-.403a35.53 35.53 0 0 0 1.187-2.765c.52-1.373.922-2.705 1.158-3.948.035-.183.066-.364.094-.543.199-1.296-.876-2.385-1.743-2.385H12.34l.03-.61c.008-.192.03-.392.068-.654.018-.124.093-.603.11-.71.113-.759.17-1.39.17-2.163 0-1.713-.96-2.864-2.13-3.038-1.17-.174-2.135.268-2.135 1.022 0 2.115-.232 3.313-1.247 4.995-.469.777-1.164 1.297-2.01 1.592a5.576 5.576 0 0 1-2.322.266c-.095-.008-.167-.017-.125-.017z'/%3E      %3Cpath fill='%23576B95' d='M3.265 8.511h1.167V20.37H3.265z'/%3E    %3C/g%3E    %3Cpath stroke='%23576B95' stroke-width='.933' d='M18.464 5.833a4.606 4.606 0 0 1 1.533 1.004A4.6 4.6 0 0 1 21 8.369a4.606 4.606 0 0 1 1.003-1.532c.426-.426.938-.76 1.533-1.004a4.606 4.606 0 0 1-1.533-1.003A4.606 4.606 0 0 1 21 3.298a4.606 4.606 0 0 1-1.003 1.532c-.426.426-.938.76-1.533 1.003z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__icon-worth_active::before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E  %3Cg fill='none' fill-rule='evenodd'%3E    %3Cpath d='M0 0h20v20H0z'/%3E    %3Cg transform='translate(1.667 3.333)'%3E      %3Cpath fill='%23576B95' stroke='%23576B95' stroke-width='.833' d='M1.963 6.053h-.707c-.417 0-.84.434-.84.944v6.518c0 .488.429 1.17.7 1.17h9.304c.63 0 1.498-.764 2.057-1.945l.139-.288a25.38 25.38 0 0 0 .848-1.975c.372-.98.658-1.932.827-2.82.025-.13.047-.26.067-.387.142-.926-.626-1.704-1.245-1.704h-4.3l.021-.436c.007-.137.023-.28.05-.467l.078-.507c.08-.542.12-.993.12-1.546 0-1.223-.684-2.045-1.52-2.17-.835-.124-1.525.192-1.525.731 0 1.51-.166 2.366-.89 3.567-.335.556-.832.927-1.436 1.138a3.983 3.983 0 0 1-1.659.19c-.068-.006-.12-.013-.089-.013z'/%3E      %3Crect width='1.11' height='8.471' x='2.332' y='6.079' fill='%23FFF' rx='.555'/%3E    %3C/g%3E    %3Cpath fill='%23576B95' stroke='%23576B95' stroke-width='.667' d='M13.189 4.167c.425.174.79.412 1.094.716.304.304.543.67.717 1.095a3.29 3.29 0 0 1 .717-1.095 3.29 3.29 0 0 1 1.094-.716 3.29 3.29 0 0 1-1.094-.717A3.29 3.29 0 0 1 15 2.356a3.29 3.29 0 0 1-.717 1.094 3.29 3.29 0 0 1-1.094.717z'/%3E  %3C/g%3E%3C/svg%3E")}.pay__worth-desc{color:#576b95;font-size:14px;line-height:20px}.pay__desc{font-size:14px;line-height:20px;margin-top:12px;text-align:center;color:rgba(0,0,0,0.3);margin-bottom:-8px}.pay__notice-btn-wrp{position:relative}.pay__notice-qrcode{display:none;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:70px;width:218px;padding:40px 0;background-color:#fff;color:#333;box-shadow:0 1px 9px rgba(0,0,0,0.2);border-radius:4px;text-align:center;z-index:100}.pay__qrcode-wrp{height:124px}.pay__qrcode-wrp img{width:124px}.pay__qrcode-title{margin-top:20px;font-size:14px}.pay__static{position:relative;z-index:10;text-align:center;padding-bottom:48px;margin-bottom:-23px}.pay__static h3{padding-top:40px;font-size:17px;margin-bottom:4px;font-weight:500}.pay__static p{font-size:14px;color:rgba(0,0,0,0.3)}.pay__static button{margin-top:64px;outline:0}.pay__static button:active{outline:0}.pay__static .pay__notice-qrcode_bottom{top:120px;bottom:auto}.pay__static .pay__detail{margin-bottom:0}.pay__mask_static{margin-top:-120px;height:120px;position:relative;background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(#fff));background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}@media screen and (min-width:1024px){.pay__notice{padding:35px 0}.pay__notice-intro{max-width:677px;padding:0 40px;margin:0 auto;box-sizing:border-box;position:relative}}.pay__detail-wrp{margin-top:32px}.reward_area+.pay__detail-wrp{margin-top:12px}.reward_qrcode_area+.pay__detail-wrp{margin-top:12px}.pay__main+.pay__detail-wrp{margin-top:48px;margin-bottom:0;padding-bottom:0}.pay__head-notice{font-size:14px;padding-top:12px;color:rgba(0,0,0,0.3);margin-bottom:-32px;line-height:20px}.pay__preview-tips{color:rgba(0,0,0,0.3);margin-top:16px;font-size:12px;line-height:17px;margin-bottom:-15px}@media(prefers-color-scheme:dark){.pay button{background-color:#c77d2f;color:rgba(255,255,255,0.8)}.unpay__tag{background-color:#c77d2f;color:#fff}.pay__tag{background-color:rgba(149,92,33,0.35);color:#fa9d3b}.pay__summary{color:rgba(255,255,255,0.5)}.pay__empty-notice{color:rgba(255,255,255,0.5)}.pay__mask_static{background:-webkit-gradient(linear,left top,left bottom,from(rgba(35,35,35,0)),to(#232323));background:linear-gradient(to bottom,rgba(35,35,35,0),#232323)}.pay button.btn_disabled{background-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.2)}.pay .pay__notice button.btn_disabled{background-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.2)}.pay button:not(.btn_disabled):active{position:relative}.pay button:not(.btn_disabled):active::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;background-color:rgba(0,0,0,0.1)}.pay__detail-summary::before,.pay__detail-summary::after{base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAFaElEQVR42u3cX2hbZRjH8eMfRLxRLwS9bpo0K62VhFhqliVdu7VNmrSrLaxXihdejIHOemMndAWvvBgiaEHEaTd2UVidG9pqpbCB4Ko4pqyyMrqt1k67P3RsrE2T1Pf3cF5WXk6WmJz0PU2fBz6wi+Y9eb8j/05PavDw8PDw8PDwbOzU1NQ8C5WVle+Dy+X6ybRkugkVFRWzIP79OYifbQaDh4OWZESUsEkGWyvQCRBrPAfGVh0Oal/Il0wrgCh2EGudB5/P9zQYW2U4qM0jNn8B1CD1Hg/5Yvt2MheLkVvxOPmtpYW8FwhAzqcAY6sMB7UvZAOoAWrdbnKhtZUkOzvzcjISIS6xBlQoPB7PK2CU63BQ+1+MPgZ14wcDAUCkgvT5/WD1IvUdGOU6HNT+h/wPoG58sqkJCg56NRYDq6BJqKurewaMchsOav9DfhrUjf/Z1gaIU5TW6mqiru92u9vAKLfhoPYHnQd1w/Pt7VBs0Kxv+MUpvnfBKLfhoPYHvQHqhv8VMaHYoEdCIbB6cfoMjHIbDmrThMPhx0FsLk3ki4XLRVZEDEgWaSQcBjUoTIE8oT0wMPAoGJt1OGiJTiirGw16vYAYtvimsRGwdi6zIF6ousDYbMNBixyfz/cUrAt5BNSNve33g21Bv45EQImXl4+gurr6CTCcNhw0y4jFnwdxsEEQcb43/Wz61TRjWgTxsxnItZGxnTvBtqA343Ey0dREjoZCRP7Hveh2w8N+yfcVcFCnBxVP1CEQB7luWrPTO34/IMKGupNIkAN+Pzws7KvAQZ0WdN2lMatQaDCvy0Wat20j+3w+MhqJkGWxOUhq1h8IgFXQRQiHw08CB9UYVH2bcxnUA0REFDghYsDU7t1EXnhwsbWV/N3eDtpD5WspkSDBqiqwCtsDHFR3UHGjA6Au+LLHQxZEpIVNFOr/+qC+HrK+4eegDgg6DuqCR3fsAO0bztdqXx/JzM+T1UOHIOftvm1sBKugp4GDagma+/JCefGW9lC5pIaGSCaZJOnJSZLs6oKctz+3axdYBf0FOKieoLkvQJgWMaedGHTvXpI+c4bISU9MkOSePZD3ejNtbWAV9CpwUN1BxY0ugbrgTDQK+gNK+/eTzNwckZMaG4OC172VSIBV0NvAQXUHzfaR83I0Cva/iBw7Bg9C9PZC9rdDhw+TzPIyPAh56hTY9RHU6qPnCnBQ3UHlk6+64JVYDGwPKgPJySwuktXBQZLs6SHp8XGiTmp0FOz+1YlV0CXgoLqDihv9BcqC8otXpXtDPjxM1JFv0NVJjYyA7ffjejwOVkGvAQfVHTTLL+M27ISxfHHKNqnjx6FUx5cnytWg8DtwUN1B5S+l1AX/ETGh1EHlSYz01BSRI58Scq9Rkgt14UfgoLqDyo9Y6oI34nEofVCpp4es9vfDhh33LZ8PrL7scBA4qOageMjfAXXB2/E46D8pUiJ3OzqI3+MBq6+H+4GD6g4qbnwPlAXlxVXaN14qw6EQqCFhAcTr4iPAQXUHzfbnfu51dID2jdtMftEs60NdtNgHsg8HdUBQy8sX74uY98so6LLp9bo6sAr5B3R3dz8GHNRBQe+CeoBrsRhoD1Ek+dQlL0XH3iypfz6TgzolqFjsHKgHGAoGQXuQQp1vaSGdNTWgBMz+EZODOi2oeLi/AeqBPC4X+bChgcgTsbPRqCPIS2jONjeTT4NB0ltbC/n8ecxPQHbgoE4NKj9iiYOcNa2VIxFvGcTD+02Q++egTg9q8WXZ08QBEYqUAhHxS6iqqnKD3C8H3WxBLb5EuxfEnTlpugjiTl5xiEuw7uvmwyDu82vg9XpfAMMpw0F5eDbz/Ad3UMJi5Mx/ewAAAABJRU5ErkJggg==")}}.rich_split_tips{margin:20px 0;min-height:24px}.rich_media_tool_tips{margin-bottom:8px}.rich_media_tool{overflow:hidden;padding-top:15px;line-height:32px}.rich_media_tool .meta_primary{float:left;margin-right:10px}.rich_media_tool .meta_primary.article_modify_tag{margin-bottom:0;float:none;color:#bcbcbc;font-size:14px}.rich_media_tool .meta_extra{float:right;margin-left:10px}.rich_media_tool .meta_praise{text-align:right}.media_tool_meta i{vertical-align:0;position:relative;top:1px;margin-right:3px}.meta_praise{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;min-width:3.5em}.meta_praise .praise_num{display:inline-block;vertical-align:top}.meta_praise:hover{cursor:pointer}.icon_praise_gray{background:transparent url() no-repeat 0 0;width:13px;height:13px;vertical-align:middle;display:inline-block;background-size:100% auto}.icon_praise_gray.praised{background-position:0 -18px}.praised .icon_praise_gray{background-position:0 -18px}.rich_media_tool{font-size:15px;padding-top:24px}.rich_media_tool .meta_primary{margin-right:16px}.rich_media_tool .meta_extra{margin-left:16px;color:#576b95}.rich_media_tool .meta_praise{min-width:2.5em}.rich_media_tool .meta_praise i{margin-right:5px}.icon_praise_gray{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.988h-.003c-.095-.01-.167-.022-.125-.022H1.75c-.343 0-.75.39-.75.7v6.73c0 .31.27.57.611.57H2.5V7.01a.51.51 0 0 1 0-.022zm1 .003a.55.55 0 0 1 0 .02v7.955h7.414c.748 0 1.395-.361 1.773-1.324a37.17 37.17 0 0 0 1.115-2.57c.219-.564.413-1.11.575-1.627.247-.785.413-1.48.484-2.058.073-.595-.565-1.021-1.236-1.021h-4.97l.102-.586.18-1.027.13-.55a35.058 35.058 0 0 0 .245-1.128c.212-1.098-.483-2.019-1.238-2.067-.74-.048-1.1.111-1.104.562-.008 1.276-.45 2.805-1.252 4.129-.357.589-.899.965-1.56 1.16-.217.065-.438.107-.658.132zm6.345-1.625h3.78c1.19 0 2.393.804 2.229 2.143-.08.646-.26 1.397-.523 2.235-.17.54-.37 1.107-.597 1.69a38.158 38.158 0 0 1-1.133 2.61c-.525 1.346-1.557 1.922-2.687 1.922H1.61c-.886 0-1.611-.698-1.611-1.57v-6.73c0-.871.864-1.7 1.75-1.7l.719.009A3.285 3.285 0 0 0 3.876 5.9c.435-.13.769-.361.986-.72.71-1.171 1.102-2.525 1.108-3.618C5.978.338 6.901-.07 8.14.01c1.36.088 2.48 1.57 2.155 3.255a36.012 36.012 0 0 1-.253 1.167l-.124.52-.072.414z' fill='%23576B95' fill-rule='nonzero'/%3E%3C/svg%3E");font-size:16px;width:1em;height:1em;background-size:1em}.praised .icon_praise_gray,.icon_praise_gray.praised{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.785 5.37c1.135.07 2.226.86 2.069 2.139-.08.646-.26 1.397-.523 2.235-.17.54-.37 1.107-.597 1.69a38.159 38.159 0 0 1-1.133 2.61c-.525 1.346-1.557 1.922-2.687 1.922H1.61c-.886 0-1.611-.698-1.611-1.57v-6.73c0-.844.81-1.648 1.667-1.698l.083-.002h.622l.084.009h.013a.704.704 0 0 0 .057.009l.081.01c.407.045.858.028 1.269-.094a.674.674 0 0 1 .08-.016c.487-.148.843-.412 1.077-.8.714-1.179 1.13-2.567 1.137-3.72C6.177.327 6.973-.066 8.126.01c1.32.085 2.258 1.534 1.971 3.018a35.733 35.733 0 0 1-.251 1.16l-.068.286-.052.218-.119.675h4.018c.054 0 .107.001.16.005zM2 7.01v7.98c0 .288.224.51.5.51a.51.51 0 0 0 .5-.51V7.01a.501.501 0 0 0-.5-.51.51.51 0 0 0-.5.51z' fill='%23576B95' fill-rule='evenodd'/%3E%3C/svg%3E");background-position:0 0}.praise_num{color:#576b95}.media_tool_meta i{margin-right:0}.weui-dialog_haokan .weui-dialog__bd{padding-bottom:1.5em;word-break:normal}.pic_haokan{width:76%;height:auto}.like_btn{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;background-color:transparent;border:0;display:inline-block;vertical-align:middle;white-space:nowrap;padding:0;font-size:15px;font-family:inherit;line-height:2.13333333;color:#576b95}.like_btn:before{content:"";display:inline-block;vertical-align:middle;font-size:24px;width:1em;height:1em;margin-top:-0.15em;margin-right:2px;background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.145 5.254l2.623-2.653a1.726 1.726 0 0 1 2.464 0l2.623 2.653 3.585.973c.93.25 1.485 1.222 1.236 2.17l-.96 3.622.96 3.625c.25.946-.306 1.918-1.234 2.168l-3.56.965-2.65 2.671c-.682.69-1.782.69-2.464 0l-2.623-2.654-3.585-.972c-.93-.25-1.485-1.222-1.236-2.17l.96-3.623-.96-3.634c-.25-.946.306-1.918 1.234-2.168l3.587-.973zm.874 1.55l.007 2.461a1.8 1.8 0 0 1-.867 1.54l-2.11 1.224 2.1 1.218c.541.31.877.9.877 1.536l-.007 2.462 2.106-1.238a1.713 1.713 0 0 1 1.754-.004l2.102 1.236-.007-2.466c0-.624.333-1.21.867-1.53l2.11-1.224-2.1-1.217c-.541-.31-.877-.9-.877-1.537l.007-2.461-2.106 1.238a1.695 1.695 0 0 1-1.748.002L9.02 6.804zM7.874 9.267l-.007-2.719-3.015.818a.593.593 0 0 0-.417.723l.808 3.053 2.335-1.354a.616.616 0 0 0 .296-.521zm-.291 5.006l-2.34-1.357-.807 3.043a.593.593 0 0 0 .418.724l3.013.817.007-2.717a.59.59 0 0 0-.291-.51zm4.12 2.752l-2.32 1.365 2.195 2.22c.233.236.611.236.844 0l2.203-2.22-2.318-1.365a.585.585 0 0 0-.603 0zm4.423-2.253l.007 2.718 3.015-.817c.313-.085.499-.41.417-.722l-.808-3.045-2.335 1.354a.612.612 0 0 0-.296.512zm.291-4.996l2.34 1.357.807-3.043a.593.593 0 0 0-.418-.724l-3.013-.818-.007 2.718c0 .21.112.407.291.51zm-4.713-2.752a.57.57 0 0 0 .592 0l2.32-1.366-2.194-2.22a.592.592 0 0 0-.844 0l-2.195 2.22 2.32 1.366z' fill='%23576B95' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 no-repeat;background-size:1em}.like_num{font-size:15px;margin-left:.2em}.like_btn_liked{color:#ffc300}.like_btn_liked:before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.145 5.254l2.623-2.653a1.726 1.726 0 0 1 2.464 0l2.623 2.653 3.585.973c.93.25 1.485 1.222 1.236 2.17l-.96 3.622.96 3.625c.25.946-.306 1.918-1.234 2.168l-3.56.965-2.65 2.671c-.682.69-1.782.69-2.464 0l-2.623-2.654-3.585-.972c-.93-.25-1.485-1.222-1.236-2.17l.96-3.623-.96-3.634c-.25-.946.306-1.918 1.234-2.168l3.587-.973zm.874 1.55l.007 2.461a1.8 1.8 0 0 1-.867 1.54l-2.11 1.224 2.1 1.218c.541.31.877.9.877 1.536l-.007 2.462 2.106-1.238a1.713 1.713 0 0 1 1.754-.004l2.102 1.236-.007-2.466c0-.624.333-1.21.867-1.53l2.11-1.224-2.1-1.217c-.541-.31-.877-.9-.877-1.537l.007-2.461-2.106 1.238a1.695 1.695 0 0 1-1.748.002L9.02 6.804zM7.874 9.267l-.007-2.719-3.015.818a.593.593 0 0 0-.417.723l.808 3.053 2.335-1.354a.616.616 0 0 0 .296-.521zm-.291 5.006l-2.34-1.357-.807 3.043a.593.593 0 0 0 .418.724l3.013.817.007-2.717a.59.59 0 0 0-.291-.51zm4.12 2.752l-2.32 1.365 2.195 2.22c.233.236.611.236.844 0l2.203-2.22-2.318-1.365a.585.585 0 0 0-.603 0zm4.423-2.253l.007 2.718 3.015-.817c.313-.085.499-.41.417-.722l-.808-3.045-2.335 1.354a.612.612 0 0 0-.296.512zm.291-4.996l2.34 1.357.807-3.043a.593.593 0 0 0-.418-.724l-3.013-.818-.007 2.718c0 .21.112.407.291.51zm-4.713-2.752a.57.57 0 0 0 .592 0l2.32-1.366-2.194-2.22a.592.592 0 0 0-.844 0l-2.195 2.22 2.32 1.366z' fill='%23FFC300' fill-rule='evenodd'/%3E%3C/svg%3E")}.like_comment_wrp{font-size:17px;margin-top:9px;margin-bottom:8px;position:relative;z-index:1}.like_comment_wrp:before,.like_comment_wrp:after{content:"";display:inline-block;width:0;height:0;border-width:7px;border-style:dashed;border-top-width:0;border-bottom-color:rgba(0,0,0,0.03);border-bottom-style:solid;position:absolute;top:-7px;right:28px}.like_comment_wrp:after{border-bottom-color:#f7f7f7;top:-6px}.like_comment_wrp.editing .like_comment_inner{display:block}.like_comment_wrp.editing .like_comment_ft{padding:12px 0 0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;align-items:flex-end}.like_comment_wrp.editing .like_comment_msg{-webkit-box-flex:1;-webkit-flex:1;flex:1}.like_comment_wrp.editing .like_comment_textarea{height:4.5em}.like_comment_wrp.editing .like_comment_btn{display:inline-block}.like_comment_inner{background-color:rgba(0,0,0,0.03);border-radius:4px;overflow:hidden;padding:24px 16px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;text-align:center}.like_comment_share_link{display:inline-block;margin-left:8px}.like_comment_share_link:after{content:" ";display:inline-block;vertical-align:middle;height:14px;width:8px;margin-left:6px;margin-top:-0.2em;background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg width='8' height='14' viewBox='0 0 8 14' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M7.588 12.43l-1.061 1.06L.748 7.713a.996.996 0 0 1 0-1.413L6.527.52l1.06 1.06-5.424 5.425 5.425 5.425z' id='a'/%3E%3C/defs%3E%3Cuse fill='%23576B95' transform='rotate(-180 4.02 7.005)' xlink:href='%23a' fill-rule='evenodd'/%3E%3C/svg%3E") 50% 50% no-repeat}.like_comment_tips{line-height:1.4}.like_comment_tips>i{margin-right:4px;margin-top:-0.2em}.like_comment_tips .weui-icon-success{background:transparent url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M11.917%2021.848c-5.485%200-9.93-4.446-9.93-9.93%200-5.486%204.445-9.932%209.93-9.932%205.485%200%209.931%204.446%209.931%209.931%200%205.485-4.446%209.931-9.93%209.931z%22%20fill%3D%22%2307C160%22%2F%3E%3Cpath%20d%3D%22M10.749%2014.042l5.56-5.56%201.056%201.054L11.6%2015.3a1.2%201.2%200%2001-1.697%200l-2.951-2.954%201.05-1.05%202.747%202.747z%22%20fill-opacity%3D%22.9%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 50% 50% no-repeat;color:transparent;-webkit-mask-image:unset;mask-image:unset;background-size:100%}.like_comment_tips .icon-success-primary{display:none}.like_comment_bd{-webkit-box-flex:1;-webkit-flex:1;flex:1;line-height:1.6}.like_comment_ft{display:none;padding-left:16px;letter-spacing:-0.68px}.like_comment_btn{display:none;outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-width:0;background-color:transparent;font-size:17px;color:#ffc300}.like_comment_btn[disabled="disabled"]{color:rgba(0,0,0,0.3)}.like_comment_textarea{height:1.6em;-webkit-overflow-scrolling:touch;caret-color:#1aad19}.like_comment_textarea::-webkit-input-placeholder{color:#b2b2b2}.like_comment_msg{color:#fa5151;font-size:14px}.like_comment_extra_info>button{margin-top:24px}.like_comment_extra_tips{font-size:15px;color:rgba(0,0,0,0.5);line-height:1.4;margin:16px 0}.like_comment_pic{display:block;width:263px;margin:0 auto}.like_comment_primary_pop{position:relative}.like_comment_primary_wrp{font-size:16px;margin-top:9px;margin-bottom:4px;background-color:#fff;position:absolute;left:0;right:0;z-index:21}.like_comment_primary_wrp:before,.like_comment_primary_wrp:after{content:"";display:inline-block;width:0;height:0;border-width:7px;border-style:dashed;border-top-width:0;border-bottom-color:#fff;border-bottom-style:solid;position:absolute;top:-7px;right:28px}.like_comment_primary_wrp:after{border-bottom-color:#fff;top:-6px}.like_comment_primary_wrp.editing{position:fixed;top:16px;bottom:0;left:0;right:0;border-top-left-radius:12px;border-top-right-radius:12px;margin:0}.like_comment_primary_wrp.editing .like_comment_textarea_wrp{margin-top:16px;padding-top:14px;position:relative}.like_comment_primary_wrp.editing .like_comment_textarea_wrp:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid rgba(0,0,0,0.1);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.like_comment_primary_wrp.editing .like_comment_textarea{height:102px}.like_comment_primary_wrp.editing:before,.like_comment_primary_wrp.editing:after{display:none}.like_comment_primary_wrp.editing .like_comment_primary_inner{-webkit-border-radius:0;border-top-left-radius:12px;border-top-right-radius:12px;padding:0 24px}.like_comment_primary_wrp.editing .like_comment_primary_title{text-align:center}.like_comment_primary_wrp.editing .like_comment_primary_bd:after{display:none;padding-bottom:0;margin-top:20px}.like_comment_primary_wrp .like_comment_msg{margin:0 .7em 0 0}.like_comment_primary_pos_top{bottom:32px;margin-bottom:9px}.like_comment_primary_pos_top:before,.like_comment_primary_pos_top:after{top:auto;bottom:-7px;border-top:7px solid #fff;border-bottom:0 dashed}.like_comment_primary_inner{padding:20px;background-color:#fff;border-radius:2px;overflow:hidden}.like_comment_primary_hd{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:8px;height:8em}.like_comment_primary_title{-webkit-box-flex:1;-webkit-flex:1;flex:1;font-size:15px;font-weight:700;line-height:1.4;padding:0 16px}.like_comment_primary_cancel{outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-width:0;background-color:transparent;color:rgba(0,0,0,0.9);font-size:0}.like_comment_primary_cancel:active{color:rgba(134,134,134,0.95)}.like_comment_primary_btn{outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-width:0;background-color:#ffc300;font-size:16px;color:#fff;padding:0 12px;line-height:2;font-weight:700;border-radius:3px}.like_comment_primary_btn[disabled]{color:rgba(0,0,0,0.2);background-color:rgba(0,0,0,0.05)}.like_comment_primary_btn:not([disabled]):active{background:#e6b000}.authorize-main_header .like_comment_primary_wrp.editing .like_comment_primary_inner,.reward_area_carry_whisper .like_comment_primary_wrp.editing .like_comment_primary_inner{padding:0 16px}.authorize-main_header .like_comment_primary_bd,.reward_area_carry_whisper .like_comment_primary_bd{padding:0 8px}.authorize-main_header .like_comment_primary_btn[disabled],.reward_area_carry_whisper .like_comment_primary_btn[disabled]{background-color:rgba(0,0,0,0.05)}.authorize-main_header .like_comment_primary_btn,.reward_area_carry_whisper .like_comment_primary_btn{background-color:#07c160}.authorize-main_header .like_comment_primary_btn:not([disabled]):active,.reward_area_carry_whisper .like_comment_primary_btn:not([disabled]):active{background-color:#06ad56}.authorize-main_header .like_comment_primary_hd_side,.reward_area_carry_whisper .like_comment_primary_hd_side{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;left:-5px}.authorize-main_header .like_comment_primary_title+.like_comment_primary_hd_side,.reward_area_carry_whisper .like_comment_primary_title+.like_comment_primary_hd_side{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;right:auto;left:auto}.like_comment_primary_hd_side{position:relative;left:-8px;width:64px}.like_comment_primary_title+.like_comment_primary_hd_side{left:auto;right:-8px}.like_comment_primary_bd{padding-bottom:.5em;margin-top:8px;position:relative}.like_comment_primary_bd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.like_comment_media_title{font-size:14px;color:rgba(0,0,0,0.5);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.like_comment_primary_mask{position:fixed;z-index:20;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,0.2)}.rich_media_extra .da_video_area,.rich_media_extra .mpad_cpc,.rich_media_extra .mpad_sponsor_inner{position:relative;z-index:1}.like_skin_primary .like_comment_primary_wrp{background-color:transparent;left:auto;right:-8px;margin-top:8px;width:90%}.like_skin_primary .like_comment_primary_wrp:before,.like_skin_primary .like_comment_primary_wrp:after{right:20px}.like_skin_primary .like_comment_primary_inner{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;padding:18px 20px 20px}.like_skin_primary .like_comment_primary_title{font-size:15px;color:rgba(0,0,0,0.9);font-weight:700;padding-right:16px}.like_skin_primary .like_comment_primary_bd{padding-bottom:0;margin-top:18px;text-align:center}.like_skin_primary .like_comment_primary_bd:after{display:none}.like_skin_primary .pic_haokan{display:block;width:100%;margin:0 auto;max-width:274px}@media screen and (device-aspect-ratio:2/3),screen and (device-aspect-ratio:40/71){.like_comment_primary_wrp.editing .like_comment_textarea{height:90px}}.appmsg_search_card{display:block;margin:16px 0;padding:12px;font-size:14px;line-height:1.4}.appmsg_search_card:active .appmsg_search_keywords_area{background:#f7f7f7}.appmsg_search_card .appmsg_search_hd{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.appmsg_search_card .appmsg_search_hd .weui-flex__item{min-width:0}.appmsg_search_card .appmsg_search_bd{display:block;padding-top:12px}.appmsg_search_card .appmsg_search_avatar{display:block;width:20px;margin-right:4px;border-radius:50%}img.appmsg_search_card .appmsg_search_avatar{height:20px!important}.appmsg_search_card .appmsg_search_nickname_wrp{display:-webkit-box;display:-webkit-flex;display:flex;white-space:nowrap;color:rgba(0,0,0,0.5)}.appmsg_search_card .appmsg_search_nickname{display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-weight:700}.appmsg_search_card .appmsg_search_keywords_area{background:#fff;border-radius:4px;text-align:center;padding:10px 20px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.appmsg_search_card .appmsg_search_keywords_area .weui-icon-search{margin-right:4px;font-size:10px;width:2em;height:2em}.appmsg_search_card .appmsg_search_keywords_list{color:rgba(0,0,0,0.9);width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;display:block;font-size:0}.appmsg_search_card .appmsg_search_keywords{display:inline;font-size:14px}.appmsg_search_card .appmsg_search_keywords:before{content:" | ";position:relative;top:-1px}.appmsg_search_card .appmsg_search_keywords:first-child:before{display:none}@media screen and (max-width:320px){.appmsg_search_card .appmsg_search_keywords_area{padding-left:14px;padding-right:14px}}@supports(-apple-color-filter:initial){.appmsg_search_card .appmsg_search_nickname{font-weight:500}}@media screen and (min-width:1024px){.rich_media_area_primary_inner,.rich_media_area_extra_inner{max-width:677px;margin-left:auto;margin-right:auto}.rich_media_area_primary{padding-top:32px}}@media(prefers-color-scheme:dark){.icon_appmsg_tag{background-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.5)}.icon_appmsg_tag.appmsg_title_tag{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5)}body{color:rgba(255,255,255,0.8)}.tips_global_primary.tips_global_primary{color:rgba(255,255,255,0.3)}.weapp_text_link:before{background-image:url('')}.appmsg_card_context{background-color:#2f2f2f}.appmsg_card_active:active{background-color:#393939}.share_mod_context .share_mod_hd:before{background:#232323}.wx-edui-video_source_link{background-color:#2f2f2f}.wx-edui-video_source_link:active{background-color:#2d2d2d}.wx-edui-video_source_word{color:rgba(255,255,255,0.5)}.wx-edui-video_account_name{color:rgba(255,255,255,0.8)}.wx-edui-video_account_arrow{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M7.588 12.43l-1.061 1.06L.748 7.713a.996.996 0 010-1.413L6.527.52l1.06 1.06-5.424 5.425 5.425 5.425z' id='a'/%3E%3C/defs%3E%3Cuse fill='%23FFFFFF' fill-opacity='.3' transform='rotate(-180 5.02 9.505)' xlink:href='%23a' fill-rule='evenodd'/%3E%3C/svg%3E")}body{background-color:#191919}body a{color:#7d90a9}.rich_media_meta_link{color:#7d90a9}.rich_media_content{color:rgba(255,255,255,0.8)}.rich_media_content img{-webkit-filter:brightness(0.8);filter:brightness(0.8)}.rich_media_meta_text,.icon_appmsg_tag.default,.reward_area_win .reward_user_tips .weui-loadmore__tips a,.simple_pagination,.sp_page_current,blockquote,.blockquote_info{color:rgba(255,255,255,0.3)}blockquote{charset=utf8,%3Csvg width='10' height='20' viewBox='0 0 10 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M6.323 10.358l-.884.884L.623 6.426a.83.83 0 0 1 0-1.177L5.44.433l.884.884-4.52 4.52 4.52 4.521z' id='a'/%3E%3C/defs%3E%3Cuse fill='%23FFF' transform='rotate(-180 4.184 7.921)' xlink:href='%23a' fill-rule='evenodd' opacity='.3' /%3E%3C/svg%3E")}.original_panel{background-color:#2f2f2f}.original_panel_tool a{color:#7d90a9}}
            </style>
            <style type="text/css">
             .page {
        max-width: 677px;
        margin-left: auto;
        margin-right: auto;
      }
      h1,h2 {
        text-align: center;
      }
      .page img {
        max-width: 100%;
        margin: 0 auto;
        display: block;
      }
      .code-snippet__fix {
        font-size: 14px;
        margin: 10px 0;
        display: block;
        color: #333;
        position: relative;
        background-color: rgba(0,0,0,.03);
        border: 1px solid #f0f0f0;
        border-radius: 2px;
        display: -ms-flexbox;
        display: flex;
        line-height: 26px;
      }
      .code-snippet__fix .code-snippet__line-index {
          counter-reset: line;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          height: 100%;
          padding: 1em;
          list-style-type: none;
      }
      .code-snippet__fix .code-snippet__line-index li {
          list-style-type: none;
          text-align: right;
      }
      .code-snippet__fix .code-snippet__line-index li:before {
        min-width: 1.5em;
        text-align: right;
        left: -2.5em;
        counter-increment: line;
        content: counter(line);
        display: inline;
        color: rgba(0,0,0,.15);
      }
      .code-snippet__fix pre {
          overflow-x: auto;
          padding: 1em 1em 1em 0;
          white-space: normal;
          -ms-flex: 1;
          flex: 1;
          -webkit-overflow-scrolling: touch;
      }
      .code-snippet__fix code {
          text-align: left;
          font-size: 14px;
          display: block;
          white-space: pre;
          display: -ms-flexbox;
          display: flex;
          position: relative;
          font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
      }
      .music-div audio {
        min-width: 300px;
        width: 100%;
        height: 30px;
      }
      .music-div {
        display: flex;
        background-color: #f1f3f4;
        align-items: center;
        padding: 8px 8px 8px 20px;
        margin: 10px 0;
      }
      .audio-dev {
        flex: 1;
      }
      .music_card_title {
          font-size: 17px;
          font-weight: 700;
      }
      .music_card_desc {
        color: rgba(0,0,0,.5);
          font-weight: 400;
          font-size: 12px;
          padding-top: 8px;
          padding-right: 1.33333333em;
      }
      .foot {
        background-color: #ededed;
        padding: 8px;
        display: none
      }
      .comment {
        max-width: 677px;
        margin-left: auto;
        margin-right: auto;
      }
      .comment .desc {
        margin-bottom: 10px;
      }
      .comment-item {
        display: flex;
        margin-bottom: 20px;
      }
      .comment-item img {
        width: 30px;
        margin-right: 8px;
      }
      .comment-item .nick-name {
        color: #695e5ee3;
        margin-right: 8px;
        font-size: 14px;
      }
      .comment-item .native-place {
        color: #9e9e9ed1;
        font-size: 14px;
      }
      .comment-item .content {
        padding-top: 5px;
        white-space: pre-line;
      }
      .comment-item .more-reply {
        margin-top: 10px;
        color: #9e9e9ed1;
      }
      .comment-item .reply {
        display: flex;
        margin-top: 10px;
      }
      .comment-item .reply img {
        width: 20px;
        margin-right: 8px;
      }
      .dialog {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.4);
      }
      .dialog .dcontent {
        width: 600px;
        height: 90%;
        margin: 2% auto auto auto;
        background-color: #fefefe;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        padding-top: 35px;
      }
      .dialog .aclose {
        text-align: left;
        line-height: 25px;
        padding: 5px 10px 0px 10px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: #ffffff;
      }
      .dialog .aclose span {
        font-size: 14px;
        color: #9e9e9ed1;
      }
      .dialog .close {
        color: #898686;
        float: right;
        font-size: 30px;
        text-decoration: none;
      }
      .dialog .contain {
        height: 100%;
        overflow: auto;
        display: flex;
        flex-flow: column;
        border-radius: 5px;
      }
      .dialog .d-top {
        padding: 0 20px;
      }
      .dialog .all-deply {
        background-color: #f7f7f7;
        padding: 10px 20px 0 20px;
        height: 100%;
      }
      .dialog .all-deply .a-desc {
        color: #898686;
        margin-bottom: 10px;
      }
      .reply-nick {
        color: #898686;
        margin: 0 3px;
      }
      .meta-div {
        margin-bottom: 10px;
        color: #898686;
      }
      .meta-div span {
        margin-right: 10px;
      }
      .meta-div .copyright-span {
        background-color: #0000000d;
        font-size: 14px;
        padding: 2px;
      }
            </style>
           </meta>
          </meta>
         </meta>
        </meta>
       </meta>
      </meta>
     </meta>
    </meta>
   </meta>
  </meta>
 </head>
 <body class="zh_CN wx_wap_page wx_wap_desktop_fontsize_2 mm_appmsg comment_feature discuss_tab appmsg_skin_default appmsg_style_default" id="activity-detail">
  <div class="fullscreen-layout-padding" id="js_fullscreen_layout_padding">
   <div class="fullscreen-layout-padding__content">
   </div>
  </div>
  <div class="rich_media" id="js_article" style="position:relative;">
   <div class="top_banner" id="js_top_ad_area">
   </div>
   <div class="rich_media_inner" id="js_base_container">
    <div class="wx_row_immersive_stream_wrap" id="js_row_immersive_stream_wrap">
     <div id="js_row_immersive_cover_img">
      <img alt="cover_image" class="wx_follow_avatar_pic" src="https://mmbiz.qpic.cn/mmbiz_jpg/fx1lx9ichONagQbopicibgVy0R8VwPVypHrsSwyeMUfe1RZUKyGCymTPmsiaFfS7qMa5Y7MxGKRtleHkAZwzKaDjWw/0?wx_fmt=jpeg"/>
     </div>
     <div class="wx_row_immersive_stream_mask" id="js_row_immersive_stream_mask">
     </div>
    </div>
    <div class="rich_media_area_primary" id="page-content" style="">
     <div class="rich_media_area_primary_inner">
      <div class="rich_media_wrp" id="img-content">
       <h1 class="rich_media_title" id="activity-name">
        Freemarker快速入门：创建动态模板引擎
       </h1>
       <div class="rich_media_meta_list" id="meta_content">
        <span class="wx_tap_link js_wx_tap_highlight rich_media_meta icon_appmsg_tag appmsg_title_tag weui-wa-hotarea" id="copyright_logo">
         原创
        </span>
        <span class="rich_media_meta rich_media_meta_text">
         <span class="wx_tap_link js_wx_tap_highlight rich_media_meta_link weui-wa-hotarea" datacanreward="0" datarewardsn="" datatimestamp="" id="js_author_name" role="link" tabindex="0">
          springboot葵花宝典
         </span>
        </span>
        <span class="rich_media_meta rich_media_meta_nickname" id="profileBt">
         <a class="wx_tap_link js_wx_tap_highlight weui-wa-hotarea" href="javascript:void(0);" id="js_name">
          springboot葵花宝典
         </a>
         <div id="js_profile_card">
         </div>
        </span>
        <span class="" id="meta_content_hide_info">
         <em class="rich_media_meta rich_media_meta_text" id="publish_time">
         </em>
         <em aria-labelledby="js_a11y_op_ip_wording js_ip_wording" class="rich_media_meta rich_media_meta_text" id="js_ip_wording_wrp" role="option" style="display: none;">
          <span aria-hidden="true" id="js_a11y_op_ip_wording">
          </span>
          <span aria-hidden="true" id="js_ip_wording">
          </span>
         </em>
         <em aria-labelledby="js_a11y_op_title_modify js_title_modify" class="rich_media_meta rich_media_meta_text" id="js_title_modify_wrp" role="option" style="display: none;">
          <span aria-hidden="true" id="js_title_modify">
          </span>
         </em>
         <span class="wx_tap_link js_wx_tap_highlight rich_media_meta rich_media_meta_link rich_media_meta_star" id="js_star" role="link" style="display: none;" tabindex="0">
         </span>
        </span>
       </div>
       <div class="rich_media_content js_underline_content autoTypeSetting24psection" id="js_content" style=";  0; ">
        <section data-mpa-powered-by="yiban.io" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style='font-size: 16px;color: black;padding-right: 10px;padding-left: 10px;line-height: 1.6;letter-spacing: 0px;word-break: break-word;text-align: left; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;'>
         <h1 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 24px;">
          <span style="display: none;">
          </span>
          <span>
           Freemarker快速入门：创建动态模板引擎
          </span>
          <span>
          </span>
         </h1>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          今日内容介绍，预计花费15分钟
         </p>
         <figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <img class="rich_pages wxw-img" data-ratio="0.47540160642570284" data-type="png" data-w="1992" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrQE8Lw7sGeA536FCCkRVnauscUWxUgKDw2xR4XM5Bv4hptq3JCVXS1g/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </figure>
         <h2 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;border-bottom: 2px solid rgb(239, 112, 96);font-size: 1.3em;">
          <span style="display: none;">
          </span>
          <span style="display: inline-block;background: rgb(239, 112, 96);color: rgb(255, 255, 255);padding: 3px 10px 1px;border-top-right-radius: 3px;border-top-left-radius: 3px;margin-right: 3px;">
           1. Freemarker介绍
          </span>
          <span>
          </span>
          <span style="display: inline-block;vertical-align: bottom;border-bottom: 36px solid #efebe9;border-right: 20px solid transparent;">
          </span>
         </h2>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          FreeMarker 是一款 静态模板引擎：
          <strong>
           即一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具
          </strong>
          。FreeMarker不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。
         </p>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          模板编写为
          <strong>
           FreeMarker Template Language (FTL)
          </strong>
          。它是简单的，专用的语言， 不是 像PHP那样成熟的编程语言。那就意味着要准备数据在真实编程语言中来显示，比如数据库查询和业务运算， 之后模板显示已经准备好的数据。在模板中，你可以专注于如何展现数据， 而在模板之外可以专注于要展示什么数据。
          <img class="rich_pages wxw-img" data-ratio="0.4692467173462336" data-type="png" data-w="1447" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHr2IVCAnf2XN2BicNjE3UQG4EsMAoLKdCqMicBeV5r51AdGuvE6Q8HN4Kg/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </p>
         <h2 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;border-bottom: 2px solid rgb(239, 112, 96);font-size: 1.3em;">
          <span style="display: none;">
          </span>
          <span style="display: inline-block;background: rgb(239, 112, 96);color: rgb(255, 255, 255);padding: 3px 10px 1px;border-top-right-radius: 3px;border-top-left-radius: 3px;margin-right: 3px;">
           2.常用的java模板引
          </span>
          <span>
          </span>
          <span style="display: inline-block;vertical-align: bottom;border-bottom: 36px solid #efebe9;border-right: 20px solid transparent;">
          </span>
         </h2>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          常用的java模板引擎还有 Jsp、
          <strong>
           Freemarker、Thymeleaf
          </strong>
          、Velocity 等。
         </p>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <p style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: black;">
             Jsp 为 Servlet 专用，不能单独进行使用。
            </p>
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <p style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: black;">
             Thymeleaf 为新技术，功能较为强大，但是执行的效率比较低。
            </p>
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <p style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: black;">
             Velocity从2010年更新完 2.0 版本后，便没有在更新。Spring Boot 官方在 1.4 版本后对此也不在支持，虽然 Velocity 在 2017 年版本得到迭代，但为时已晚。
            </p>
           </section>
          </li>
         </ul>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          Freemarker技术的功能可以和JSP一样，都可以实现动态技术。
         </p>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           JSP  VS Freemarker
          </strong>
         </p>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <p style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: black;">
             相同点：都可以作为动态技术去使用
            </p>
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <p style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: black;">
             不同点：Freemarker可以作为静态化技术去使用，而JSP不行。
            </p>
           </section>
          </li>
         </ul>
         <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
          <p style="margin-bottom: 0px;">
           <br/>
          </p>
          <p style='margin-bottom: 0px;outline: 0px; -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;text-wrap: wrap;color: rgb(0, 0, 0);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);'>
           <span style='outline: 0px;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;'>
            如果您觉得本文不错，
           </span>
           <span style='outline: currentcolor none 0px;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 16px;'>
            欢迎关注,点赞,收藏支持
           </span>
           <span style='outline: 0px;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;'>
            ，您的关注是我坚持的动力！
            <br style="outline: 0px;"/>
           </span>
          </p>
          <section class="mp_profile_iframe_wrp">
           <mp-common-profile class="js_uneditable custom_select_card mp_profile_iframe" data-alias="NotCore825505212" data-from="2" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONaibvH7u0evaWIptiaoBAHTXq4xDaS8ZaNhe1VZSHh1u8uJ5cdTzndFicFQOyszTEA3O6JNxfdPYCHzw/0?wx_fmt=png" data-id="MzIzMjIyNTYwNg==" data-is_biz_ban="0" data-nickname="springboot葵花宝典" data-pluginname="mpprofile" data-signature="主要分享JAVA技术，主要包含SpringBoot、SpingCloud、Docker、中间件等技术，以及Github开源项目">
           </mp-common-profile>
          </section>
          <p style='margin-bottom: 0px;outline: 0px; -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;text-wrap: wrap;color: rgb(34, 34, 34);background-color: rgb(255, 255, 255);'>
           <br/>
          </p>
         </section>
         <h2 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;border-bottom: 2px solid rgb(239, 112, 96);font-size: 1.3em;">
          <span style="display: none;">
          </span>
          <span style="display: inline-block;background: rgb(239, 112, 96);color: rgb(255, 255, 255);padding: 3px 10px 1px;border-top-right-radius: 3px;border-top-left-radius: 3px;margin-right: 3px;">
           3. SpringBoot快速入门Freemarker
          </span>
          <span>
          </span>
          <span style="display: inline-block;vertical-align: bottom;border-bottom: 36px solid #efebe9;border-right: 20px solid transparent;">
          </span>
         </h2>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤零】创建项目
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          创建freemarker-learn,并导入对应依赖到pom.xml
         </p>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            完整项目结果
           </section>
          </li>
         </ul>
         <figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <img class="rich_pages wxw-img" data-ratio="0.9110738255033557" data-type="png" data-w="596" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrgKd6LhxAvc3cS6b3BTyRDCgqsPEmeDOKe60NnB0ImpEpSR7Y8t7AYA/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </figure>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            pom.xml 依赖
           </section>
          </li>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">project</span> <span style="color: #9CDCFE;line-height: 26px;">xmlns</span>=<span style="color: #D69D85;line-height: 26px;">"http://maven.apache.org/POM/4.0.0"</span><br/>         <span style="color: #9CDCFE;line-height: 26px;">xmlns:xsi</span>=<span style="color: #D69D85;line-height: 26px;">"http://www.w3.org/2001/XMLSchema-instance"</span><br/>         <span style="color: #9CDCFE;line-height: 26px;">xsi:schemaLocation</span>=<span style="color: #D69D85;line-height: 26px;">"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">modelVersion</span>&gt;</span>4.0.0<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">modelVersion</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">parent</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>spring-boot-starter-parent<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>org.springframework.boot<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">version</span>&gt;</span>2.7.15<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">version</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">parent</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>com.zbbmeta<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>freemarker-learn<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">version</span>&gt;</span>1.0-SNAPSHOT<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">version</span>&gt;</span><br/><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">properties</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">maven.compiler.source</span>&gt;</span>11<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">maven.compiler.source</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">maven.compiler.target</span>&gt;</span>11<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">maven.compiler.target</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">properties</span>&gt;</span><br/><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">dependencies</span>&gt;</span><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">&lt;!--        web--&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>org.springframework.boot<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>spring-boot-starter-web<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">&lt;!--        freemarker--&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>org.springframework.boot<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>spring-boot-starter-freemarker<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">&lt;!--        lombok--&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>org.projectlombok<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>lombok<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">&lt;!--        test--&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span>org.springframework.boot<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">groupId</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span>spring-boot-starter-test<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">artifactId</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">dependency</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">dependencies</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">project</span>&gt;</span><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤一】创建项目引导类
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          在java目录下创建
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           com.zbbmeta.freemarker
          </code>
          包，在其包下创建
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           FreemarkerApplication
          </code>
          引导类
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #569CD6;line-height: 26px;">package</span> com.zbbmeta.freemarker;<br/><br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.boot.SpringApplication;<br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.boot.autoconfigure.SpringBootApplication;<br/><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">/**<br/> * <span style="color: #608B4E;line-height: 26px;">@author</span> springboot葵花宝典<br/> * <span style="color: #608B4E;line-height: 26px;">@description</span>: TODO<br/> */</span><br/><span style="color: #9B9B9B;line-height: 26px;">@SpringBootApplication</span><br/><span style="color: #569CD6;line-height: 26px;">public</span> <span style="color: #B8D7A3;line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">class</span> <span style="color: #DCDCDC;line-height: 26px;">FreemarkerApplication</span> </span>{<br/>    <span style="line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">public</span> <span style="color: #569CD6;line-height: 26px;">static</span> <span style="color: #569CD6;line-height: 26px;">void</span> <span style="line-height: 26px;">main</span><span style="line-height: 26px;">(String[] args)</span> </span>{<br/>        SpringApplication.run(FreemarkerApplication<span style="color: #B8D7A3;line-height: 26px;">.<span style="color: #569CD6;line-height: 26px;">class</span>,<span style="color: #DCDCDC;line-height: 26px;">args</span>)</span>;<br/>    }<br/>}<br/><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤二】配置文件
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          在
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           resources
          </code>
          目录下创建
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           application.yml
          </code>
          文件，内容如下
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9CDCFE;line-height: 26px;">server:</span><br/>  <span style="color: #9CDCFE;line-height: 26px;">port:</span> <span style="color: #B8D7A3;line-height: 26px;">8881</span> <span style="color: #57A64A;font-style: italic;line-height: 26px;">#服务端口</span><br/><span style="color: #9CDCFE;line-height: 26px;">spring:</span><br/>  <span style="color: #9CDCFE;line-height: 26px;">application:</span><br/>    <span style="color: #9CDCFE;line-height: 26px;">name:</span> <span style="color: #D69D85;line-height: 26px;">freemarker-learn</span> <span style="color: #57A64A;font-style: italic;line-height: 26px;">#指定服务名</span><br/>  <span style="color: #9CDCFE;line-height: 26px;">freemarker:</span><br/>    <span style="color: #9CDCFE;line-height: 26px;">cache:</span> <span style="color: #569CD6;line-height: 26px;">false</span>  <span style="color: #57A64A;font-style: italic;line-height: 26px;">#关闭模板缓存，方便测试</span><br/>    <span style="color: #9CDCFE;line-height: 26px;">settings:</span><br/>      <span style="color: #9CDCFE;line-height: 26px;">template_update_delay:</span> <span style="color: #B8D7A3;line-height: 26px;">0</span> <span style="color: #57A64A;font-style: italic;line-height: 26px;">#检查模板更新延迟时间，设置为0表示立即检查，如果时间大于0会有缓存不方便进行模板测试</span><br/>    <span style="color: #9CDCFE;line-height: 26px;">suffix:</span> <span style="color: #D69D85;line-height: 26px;">.ftl</span>               <span style="color: #57A64A;font-style: italic;line-height: 26px;">#指定Freemarker模板文件的后缀名</span><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤三】 配置实体类
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          在
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           com.zbbmeta.freemarker.entity
          </code>
          包下创建
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           Student
          </code>
          类
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #569CD6;line-height: 26px;">package</span> com.zbbmeta.freemarker.entity;<br/><br/><span style="color: #569CD6;line-height: 26px;">import</span> lombok.Data;<br/><br/><span style="color: #569CD6;line-height: 26px;">import</span> java.util.Date;<br/><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">/**<br/> * <span style="color: #608B4E;line-height: 26px;">@author</span> springboot葵花宝典<br/> * <span style="color: #608B4E;line-height: 26px;">@description</span>: TODO<br/> */</span><br/><span style="color: #9B9B9B;line-height: 26px;">@Data</span><br/><span style="color: #569CD6;line-height: 26px;">public</span> <span style="color: #B8D7A3;line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">class</span> <span style="color: #DCDCDC;line-height: 26px;">Student</span> </span>{<br/>    <span style="color: #569CD6;line-height: 26px;">private</span> String name;<span style="color: #57A64A;font-style: italic;line-height: 26px;">//姓名</span><br/>    <span style="color: #569CD6;line-height: 26px;">private</span> <span style="color: #569CD6;line-height: 26px;">int</span> age;<span style="color: #57A64A;font-style: italic;line-height: 26px;">//年龄</span><br/>    <span style="color: #569CD6;line-height: 26px;">private</span> Date birthday;<span style="color: #57A64A;font-style: italic;line-height: 26px;">//生日</span><br/>    <span style="color: #569CD6;line-height: 26px;">private</span> Float money;<span style="color: #57A64A;font-style: italic;line-height: 26px;">//钱包</span><br/>}<br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤四】 创建freemarker的FileController接口类
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          在
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           com.zbbmeta.freemarker.controller
          </code>
          包下创建FStudentController接口类
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #569CD6;line-height: 26px;">package</span> com.zbbmeta.freemarker.controller;<br/><br/><span style="color: #569CD6;line-height: 26px;">import</span> com.zbbmeta.freemarker.entity.Student;<br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.stereotype.Controller;<br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.ui.Model;<br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.web.bind.annotation.GetMapping;<br/><span style="color: #569CD6;line-height: 26px;">import</span> org.springframework.web.bind.annotation.RequestMapping;<br/><br/><br/><span style="color: #569CD6;line-height: 26px;">import</span> java.util.ArrayList;<br/><span style="color: #569CD6;line-height: 26px;">import</span> java.util.Date;<br/><span style="color: #569CD6;line-height: 26px;">import</span> java.util.HashMap;<br/><span style="color: #569CD6;line-height: 26px;">import</span> java.util.List;<br/><br/><span style="color: #57A64A;font-style: italic;line-height: 26px;">/**<br/> * <span style="color: #608B4E;line-height: 26px;">@author</span> springboot葵花宝典<br/> * <span style="color: #608B4E;line-height: 26px;">@description</span>: TODO<br/> */</span><br/><span style="color: #9B9B9B;line-height: 26px;">@Controller</span> <span style="color: #57A64A;font-style: italic;line-height: 26px;">//用于跳转页面，而非返回json数据</span><br/><span style="color: #9B9B9B;line-height: 26px;">@RequestMapping</span>(<span style="color: #D69D85;line-height: 26px;">"/student"</span>)<br/><span style="color: #569CD6;line-height: 26px;">public</span> <span style="color: #B8D7A3;line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">class</span> <span style="color: #DCDCDC;line-height: 26px;">StudentController</span> </span>{<br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">/**<br/>     * 入门<br/>     */</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">@GetMapping</span><br/>    <span style="line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">public</span> String <span style="line-height: 26px;">hello</span><span style="line-height: 26px;">(Model model)</span></span>{<br/><br/>        <span style="color: #57A64A;font-style: italic;line-height: 26px;">//存储数据</span><br/>        model.addAttribute(<span style="color: #D69D85;line-height: 26px;">"name"</span>,<span style="color: #D69D85;line-height: 26px;">"jack"</span>);<br/><br/>        Student student = <span style="color: #569CD6;line-height: 26px;">new</span> Student();<br/>        student.setName(<span style="color: #D69D85;line-height: 26px;">"如花"</span>);<br/>        model.addAttribute(<span style="color: #D69D85;line-height: 26px;">"student"</span>,student);<br/><br/>        <span style="color: #57A64A;font-style: italic;line-height: 26px;">//路径：prefix+student+suffix</span><br/>        <span style="color: #57A64A;font-style: italic;line-height: 26px;">//classpath:/templates/student.ftl</span><br/>        <span style="color: #569CD6;line-height: 26px;">return</span> <span style="color: #D69D85;line-height: 26px;">"student"</span>;<span style="color: #57A64A;font-style: italic;line-height: 26px;">//返回展示数据的页面名称</span><br/>    }<br/>}<br/><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤六】 Freemarker模板显示数据
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          在
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           resources
          </code>
          下建立
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           templates
          </code>
          目录，在templates目录下创建
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           student.ftl
          </code>
          模板文件
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;!DOCTYPE <span style="line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">meta</span> <span style="color: #9CDCFE;line-height: 26px;">charset</span>=<span style="color: #D69D85;line-height: 26px;">"utf-8"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span>Hello World!<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/>name属性值：${name}<br/><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">hr</span>/&gt;</span><br/><br/>学生的姓名：${student.name}<br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           【步骤七】 测试
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          启动项目，访问：
          <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
           http://localhost:8881/student
          </code>
         </p>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <img data-ratio="0.23671497584541062" data-type="png" data-w="828" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrsbXZ9mvGb39KjvAf92SHJQbKZTfTvJFZcROIo1keMTfWOMkmCklqBQ/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
          <strong>
           freemarker作为springmvc一种视图格式，默认情况下SpringMVC支持freemarker视图格式。
          </strong>
          <img class="rich_pages wxw-img" data-ratio="0.3367237687366167" data-type="png" data-w="1868" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHr1wibEdN3YM5hDnnem6L1BKbN6iaJSauIpjWvBVkviaibfCOicCGr26FO9sQ/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </p>
         <h2 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;border-bottom: 2px solid rgb(239, 112, 96);font-size: 1.3em;">
          <span style="display: none;">
          </span>
          <span style="display: inline-block;background: rgb(239, 112, 96);color: rgb(255, 255, 255);padding: 3px 10px 1px;border-top-right-radius: 3px;border-top-left-radius: 3px;margin-right: 3px;">
           4. Freemarker语法基础
          </span>
          <span>
          </span>
          <span style="display: inline-block;vertical-align: bottom;border-bottom: 36px solid #efebe9;border-right: 20px solid transparent;">
          </span>
         </h2>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           4.1. 基础语法种类
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             注释，即&lt;#--  --&gt;，介于其之间的内容会被freemarker忽略
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#--我是一个freemarker注释--</span>&gt;</span><br/><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="2" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             插值（Interpolation）：即
             <span style="cursor:pointer;">
              <span data-formula="{..}部分,freemarker会用真实的值代替" data-formula-type="inline-equation" role="presentation" style="">
               <svg aria-hidden="true" focusable="false" role="img" style="vertical-align: -0.464ex;width: 37.1ex;height: 2.161ex;" viewbox="0 -750 16398.1 955" xmlns="http://www.w3.org/2000/svg">
                <g fill="currentColor" stroke="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
                 <g data-mml-node="math">
                  <g data-mjx-texclass="ORD" data-mml-node="TeXAtom">
                   <g data-mml-node="mo">
                    <path d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" data-c="2E">
                    </path>
                   </g>
                   <g data-mml-node="mo" transform="translate(444.7, 0)">
                    <path d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" data-c="2E">
                    </path>
                   </g>
                  </g>
                  <g data-mml-node="mo" transform="translate(1000.4, 0)">
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="matrix(1 0 0 -1 0 0)">
                    部
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(944.6, 0) matrix(1 0 0 -1 0 0)">
                    分
                   </text>
                  </g>
                  <g data-mml-node="mo" transform="translate(2889.7, 0)">
                   <path d="M78 35T78 60T94 103T137 121Q165 121 187 96T210 8Q210 -27 201 -60T180 -117T154 -158T130 -185T117 -194Q113 -194 104 -185T95 -172Q95 -168 106 -156T131 -126T157 -76T173 -3V9L172 8Q170 7 167 6T161 3T152 1T140 0Q113 0 96 17Z" data-c="2C">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(3334.4, 0)">
                   <path d="M118 -162Q120 -162 124 -164T135 -167T147 -168Q160 -168 171 -155T187 -126Q197 -99 221 27T267 267T289 382V385H242Q195 385 192 387Q188 390 188 397L195 425Q197 430 203 430T250 431Q298 431 298 432Q298 434 307 482T319 540Q356 705 465 705Q502 703 526 683T550 630Q550 594 529 578T487 561Q443 561 443 603Q443 622 454 636T478 657L487 662Q471 668 457 668Q445 668 434 658T419 630Q412 601 403 552T387 469T380 433Q380 431 435 431Q480 431 487 430T498 424Q499 420 496 407T491 391Q489 386 482 386T428 385H372L349 263Q301 15 282 -47Q255 -132 212 -173Q175 -205 139 -205Q107 -205 81 -186T55 -132Q55 -95 76 -78T118 -61Q162 -61 162 -103Q162 -122 151 -136T127 -157L118 -162Z" data-c="1D453">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(3884.4, 0)">
                   <path d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z" data-c="1D45F">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(4335.4, 0)">
                   <path d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z" data-c="1D452">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(4801.4, 0)">
                   <path d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z" data-c="1D452">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(5267.4, 0)">
                   <path d="M21 287Q22 293 24 303T36 341T56 388T88 425T132 442T175 435T205 417T221 395T229 376L231 369Q231 367 232 367L243 378Q303 442 384 442Q401 442 415 440T441 433T460 423T475 411T485 398T493 385T497 373T500 364T502 357L510 367Q573 442 659 442Q713 442 746 415T780 336Q780 285 742 178T704 50Q705 36 709 31T724 26Q752 26 776 56T815 138Q818 149 821 151T837 153Q857 153 857 145Q857 144 853 130Q845 101 831 73T785 17T716 -10Q669 -10 648 17T627 73Q627 92 663 193T700 345Q700 404 656 404H651Q565 404 506 303L499 291L466 157Q433 26 428 16Q415 -11 385 -11Q372 -11 364 -4T353 8T350 18Q350 29 384 161L420 307Q423 322 423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 181Q151 335 151 342Q154 357 154 369Q154 405 129 405Q107 405 92 377T69 316T57 280Q55 278 41 278H27Q21 284 21 287Z" data-c="1D45A">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(6145.4, 0)">
                   <path d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z" data-c="1D44E">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(6674.4, 0)">
                   <path d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z" data-c="1D45F">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(7125.4, 0)">
                   <path d="M121 647Q121 657 125 670T137 683Q138 683 209 688T282 694Q294 694 294 686Q294 679 244 477Q194 279 194 272Q213 282 223 291Q247 309 292 354T362 415Q402 442 438 442Q468 442 485 423T503 369Q503 344 496 327T477 302T456 291T438 288Q418 288 406 299T394 328Q394 353 410 369T442 390L458 393Q446 405 434 405H430Q398 402 367 380T294 316T228 255Q230 254 243 252T267 246T293 238T320 224T342 206T359 180T365 147Q365 130 360 106T354 66Q354 26 381 26Q429 26 459 145Q461 153 479 153H483Q499 153 499 144Q499 139 496 130Q455 -11 378 -11Q333 -11 305 15T277 90Q277 108 280 121T283 145Q283 167 269 183T234 206T200 217T182 220H180Q168 178 159 139T145 81T136 44T129 20T122 7T111 -2Q98 -11 83 -11Q66 -11 57 -1T48 16Q48 26 85 176T158 471L195 616Q196 629 188 632T149 637H144Q134 637 131 637T124 640T121 647Z" data-c="1D458">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(7646.4, 0)">
                   <path d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z" data-c="1D452">
                   </path>
                  </g>
                  <g data-mml-node="mi" transform="translate(8112.4, 0)">
                   <path d="M21 287Q22 290 23 295T28 317T38 348T53 381T73 411T99 433T132 442Q161 442 183 430T214 408T225 388Q227 382 228 382T236 389Q284 441 347 441H350Q398 441 422 400Q430 381 430 363Q430 333 417 315T391 292T366 288Q346 288 334 299T322 328Q322 376 378 392Q356 405 342 405Q286 405 239 331Q229 315 224 298T190 165Q156 25 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 114 189T154 366Q154 405 128 405Q107 405 92 377T68 316T57 280Q55 278 41 278H27Q21 284 21 287Z" data-c="1D45F">
                   </path>
                  </g>
                  <g data-mml-node="mo" transform="translate(8841.1, 0)">
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="matrix(1 0 0 -1 0 0)">
                    会
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(944.6, 0) matrix(1 0 0 -1 0 0)">
                    用
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(1889.3, 0) matrix(1 0 0 -1 0 0)">
                    真
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(2833.9, 0) matrix(1 0 0 -1 0 0)">
                    实
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(3778.5, 0) matrix(1 0 0 -1 0 0)">
                    的
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(4723.1, 0) matrix(1 0 0 -1 0 0)">
                    值
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(5667.8, 0) matrix(1 0 0 -1 0 0)">
                    代
                   </text>
                   <text data-variant="normal" font-family="serif" font-size="947.1px" transform="translate(6612.4, 0) matrix(1 0 0 -1 0 0)">
                    替
                   </text>
                  </g>
                 </g>
                </g>
               </svg>
              </span>
             </span>
             {..}
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;">Hello ${name}<br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="3" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             FTL指令：和HTML标记类似，名字前加#予以区分，
             <strong style="color: black;">
              Freemarker会解析标签中的表达式或逻辑
             </strong>
             。
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#</span> &gt;</span>FTL指令<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#</span>&gt;</span><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="4" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             文本，仅文本信息，这些不是freemarker的注释、插值、FTL指令的内容会被freemarker忽略解析，直接输出内容。
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#--freemarker中的普通文本--</span>&gt;</span><br/>  我是一个普通的文本<br/><br/></code></pre>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           4.2 FTL指令- list
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           list指令格式
          </strong>
          ：
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;">&lt;#list&gt;&lt;/#list&gt;<br/><br/></code></pre>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           示例
          </strong>
          :
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"> <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">stus</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">stu</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu_index+1}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.name}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.age}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.money}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.birthday?string("yyyy年MM月dd日")}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/></code></pre>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          **${k_index}：得到循环的下标，使用方法是在stu后边加"_index"，它的值是从0开始
**
         </p>
         <h4 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 18px;">
          <span style="display: none;">
          </span>
          <span>
           list代码实现
          </span>
          <span style="display: none;">
          </span>
         </h4>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             在
             <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
              StudentController
             </code>
             添加以下接口
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">@GetMapping</span>(<span style="color: #D69D85;line-height: 26px;">"/list"</span>)<br/><span style="line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">public</span> String <span style="line-height: 26px;">list</span><span style="line-height: 26px;">(Model model)</span> </span>{<br/><br/>    Student stu1 = <span style="color: #569CD6;line-height: 26px;">new</span> Student();<br/>    stu1.setName(<span style="color: #D69D85;line-height: 26px;">"小强"</span>);<br/>    stu1.setAge(<span style="color: #B8D7A3;line-height: 26px;">18</span>);<br/>    stu1.setMoney(<span style="color: #B8D7A3;line-height: 26px;">1000.86f</span>);<br/>    stu1.setBirthday(<span style="color: #569CD6;line-height: 26px;">new</span> Date());<br/><br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">//小红对象模型数据</span><br/>    Student stu2 = <span style="color: #569CD6;line-height: 26px;">new</span> Student();<br/>    stu2.setName(<span style="color: #D69D85;line-height: 26px;">"小红"</span>);<br/>    stu2.setMoney(<span style="color: #B8D7A3;line-height: 26px;">200.1f</span>);<br/>    stu2.setAge(<span style="color: #B8D7A3;line-height: 26px;">19</span>);<br/>    stu2.setBirthday(<span style="color: #569CD6;line-height: 26px;">new</span> Date());<br/><br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">//将两个对象模型数据存放到List集合中</span><br/>    List&lt;Student&gt; stus = <span style="color: #569CD6;line-height: 26px;">new</span> ArrayList&lt;&gt;();<br/>    stus.add(stu1);<br/>    stus.add(stu2);<br/><br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">//向model中存放List集合数据</span><br/>    model.addAttribute(<span style="color: #D69D85;line-height: 26px;">"stus"</span>,stus);<br/>    <span style="color: #569CD6;line-height: 26px;">return</span> <span style="color: #D69D85;line-height: 26px;">"list"</span>;<br/>}<br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="2" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             添加list.ftl
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;!DOCTYPE <span style="line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">meta</span> <span style="color: #9CDCFE;line-height: 26px;">charset</span>=<span style="color: #D69D85;line-height: 26px;">"utf-8"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span>语法学习<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">h2</span>&gt;</span>遍历List集合<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">h2</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">table</span> <span style="color: #9CDCFE;line-height: 26px;">border</span>=<span style="color: #D69D85;line-height: 26px;">"1"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>序号<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>姓名<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>年龄<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>钱包<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>生日<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">stus</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">stu</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu_index+1}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.name}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.age}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.money}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.birthday?string("yyyy年MM月dd日")}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">table</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="3" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             测试结果
            </section>
           </li>
          </ol>
         </ul>
         <figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <img data-ratio="0.49850299401197606" data-type="png" data-w="668" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrWC2DxhpNo4xeIzmK0ADKTFmKqZGdkIbMnfpJvibIzFgiaSO9VckWzL8A/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </figure>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           处理日期类型
          </strong>
          ：
         </p>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            显示年月日: ${today?date}
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            显示时分秒：${today?time}
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            显示日期+时间：${today?datetime}
           </section>
          </li>
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            自定义格式化：${today?string("yyyy年MM月")}
           </section>
          </li>
         </ul>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           4.3 FTL指令- if判断
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;border-left-color: rgb(239, 112, 96);background: rgb(255, 249, 249);">
          <p style="font-size: 16px;padding-top: 8px;padding-bottom: 8px;color: black;line-height: 26px;">
           if 指令即判断指令，是常用的FTL指令，freemarker在解析时遇到if会进行判断，条件为真则输出if中间的内容，否则跳过内容不再输出。
          </p>
         </blockquote>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           if指令格式
          </strong>
          ：
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#if</span> &gt;</span><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#else</span>&gt;</span><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#if</span>&gt;</span><br/><br/></code></pre>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           示例
          </strong>
          :
         </p>
         <blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;border-left-color: rgb(239, 112, 96);background: rgb(255, 249, 249);">
          <p style="font-size: 16px;padding-top: 8px;padding-bottom: 8px;color: black;line-height: 26px;">
           需求：使用list指令中测试数据模型，判断名称为小红的数据字体显示为红色。
          </p>
         </blockquote>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">stus</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">stu</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#if</span> <span style="color: #9CDCFE;line-height: 26px;">stu.name</span>==<span style="color: #D69D85;line-height: 26px;">'小红'</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span> <span style="color: #9CDCFE;line-height: 26px;">style</span>=<span style="color: #D69D85;line-height: 26px;">"color: red"</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu_index+1}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.name}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.age}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.money}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.birthday?string("yyyy年MM月dd日")}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#else</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu_index+1}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.name}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.age}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.money}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stu.birthday?string("yyyy年MM月dd日")}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#if</span>&gt;</span><br/><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="3" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             测试结果
             <img data-ratio="0.5337954939341422" data-type="png" data-w="577" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrBMziaEGiaibs85AibOwJzBibTHCVR7xXCDfx8soneHtDx6zArMJ3ib5ia28dQ/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
            </section>
           </li>
          </ol>
         </ul>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           4.3 FTL指令- map
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           map指令格式
          </strong>
          ：
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">userMap</span>?<span style="color: #9CDCFE;line-height: 26px;">keys</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">key</span>&gt;</span><br/>  key:${key}--value:${userMap["${key}"]}<br/>  <br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/><br/><br/></code></pre>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           获取map中的值
          </strong>
          ：
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;">map['keyname'].property<br/>//或者<br/>map.keyname.property<br/><br/></code></pre>
         <h4 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 18px;">
          <span style="display: none;">
          </span>
          <span>
           map代码实现
          </span>
          <span style="display: none;">
          </span>
         </h4>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             在
             <code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05); "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);'>
              StudentController
             </code>
             添加以下接口
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">@GetMapping</span>(<span style="color: #D69D85;line-height: 26px;">"/map"</span>)<br/><span style="line-height: 26px;"><span style="color: #569CD6;line-height: 26px;">public</span> String <span style="line-height: 26px;">map</span><span style="line-height: 26px;">(Model model)</span> </span>{<br/><br/>    Student stu1 = <span style="color: #569CD6;line-height: 26px;">new</span> Student();<br/>    stu1.setName(<span style="color: #D69D85;line-height: 26px;">"小强"</span>);<br/>    stu1.setAge(<span style="color: #B8D7A3;line-height: 26px;">18</span>);<br/>    stu1.setMoney(<span style="color: #B8D7A3;line-height: 26px;">1000.86f</span>);<br/>    stu1.setBirthday(<span style="color: #569CD6;line-height: 26px;">new</span> Date());<br/><br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">//小红对象模型数据</span><br/>    Student stu2 = <span style="color: #569CD6;line-height: 26px;">new</span> Student();<br/>    stu2.setName(<span style="color: #D69D85;line-height: 26px;">"小红"</span>);<br/>    stu2.setMoney(<span style="color: #B8D7A3;line-height: 26px;">200.1f</span>);<br/>    stu2.setAge(<span style="color: #B8D7A3;line-height: 26px;">19</span>);<br/>    stu2.setBirthday(<span style="color: #569CD6;line-height: 26px;">new</span> Date());<br/><br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">//创建Map数据</span><br/>    HashMap&lt;String,Student&gt; stuMap = <span style="color: #569CD6;line-height: 26px;">new</span> HashMap&lt;&gt;();<br/>    stuMap.put(<span style="color: #D69D85;line-height: 26px;">"stu1"</span>,stu1);<br/>    stuMap.put(<span style="color: #D69D85;line-height: 26px;">"stu2"</span>,stu2);<br/>    <span style="color: #57A64A;font-style: italic;line-height: 26px;">// 3.1 向model中存放Map数据</span><br/>    model.addAttribute(<span style="color: #D69D85;line-height: 26px;">"stuMap"</span>, stuMap);<br/><br/>    <span style="color: #569CD6;line-height: 26px;">return</span> <span style="color: #D69D85;line-height: 26px;">"map"</span>;<br/>}<br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="2" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             添加map.ftl
            </section>
           </li>
          </ol>
         </ul>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;"><span style="color: #9B9B9B;line-height: 26px;">&lt;!DOCTYPE <span style="line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">meta</span> <span style="color: #9CDCFE;line-height: 26px;">charset</span>=<span style="color: #D69D85;line-height: 26px;">"utf-8"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span>语法学习<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">title</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">head</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">h2</span>&gt;</span>遍历Map集合<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">h2</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">table</span> <span style="color: #9CDCFE;line-height: 26px;">border</span>=<span style="color: #D69D85;line-height: 26px;">"1"</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>姓名<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>年龄<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>钱包<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>生日<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">stuMap</span>?<span style="color: #9CDCFE;line-height: 26px;">keys</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">key</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stuMap[key].name}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stuMap[key].age}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stuMap[key].money}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>            <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span>${stuMap[key].birthday?string("yyyy年MM月dd日")}<span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">td</span>&gt;</span><br/>        <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">tr</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/><br/><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">table</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">body</span>&gt;</span><br/><span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">html</span>&gt;</span><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="3" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             测试结果
            </section>
           </li>
          </ol>
         </ul>
         <figure data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <img class="rich_pages wxw-img" data-ratio="0.443952802359882" data-type="png" data-w="678" src="https://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONagQbopicibgVy0R8VwPVypHrbaZesUCCLibDZicZMMRjtibnrFfbIBoeLkQgVC4ZZ9GbOYQWXv4em5ZxQ/640?wx_fmt=png" style="display: block;margin-right: auto;margin-left: auto;"/>
         </figure>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           在freemarker中，判断是否相等，=与==是一样的
          </strong>
         </p>
         <h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;">
          <span style="display: none;">
          </span>
          <span>
           4.4 FTL指令- 空值判断
          </span>
          <span style="display: none;">
          </span>
         </h3>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             判断某变量是否存在使用 "??"
            </section>
           </li>
          </ol>
         </ul>
         <blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;border-left-color: rgb(239, 112, 96);background: rgb(255, 249, 249);">
          <p style="font-size: 16px;padding-top: 8px;padding-bottom: 8px;color: black;line-height: 26px;">
           用法为:variable??,如果该变量存在,返回true,否则返回false   a?? -&gt; a!=null
          </p>
         </blockquote>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           例：为防止stus为空报错可以加上判断如下：
          </strong>
         </p>
         <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box; Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;">    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#if</span> <span style="color: #9CDCFE;line-height: 26px;">stus</span>??&gt;</span>  <br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;<span style="color: #569CD6;line-height: 26px;">#list</span> <span style="color: #9CDCFE;line-height: 26px;">stus</span> <span style="color: #9CDCFE;line-height: 26px;">as</span> <span style="color: #9CDCFE;line-height: 26px;">stu</span>&gt;</span><br/>     ......<br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#list</span>&gt;</span><br/>    <span style="color: #9B9B9B;line-height: 26px;">&lt;/<span style="color: #569CD6;line-height: 26px;">#if</span>&gt;</span><br/></code></pre>
         <ul class="list-paddingleft-1" data-tool="mdnice编辑器" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;">
          <li>
           <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
            <br/>
           </section>
          </li>
          <ol class="list-paddingleft-1" start="2" style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;color: black;">
           <li>
            <section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;color: rgb(1, 1, 1);">
             缺失变量默认值使用 "!"
            </section>
           </li>
          </ol>
         </ul>
         <blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;border-left-color: rgb(239, 112, 96);background: rgb(255, 249, 249);">
          <p style="font-size: 16px;padding-top: 8px;padding-bottom: 8px;color: black;line-height: 26px;">
           使用!要以指定一个默认值，当变量为空时显示默认值
          </p>
         </blockquote>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           例： ${name!''}表示如果name为空显示空字符串
          </strong>
         </p>
         <blockquote data-tool="mdnice编辑器" style="border-top: none;border-right: none;border-bottom: none;font-size: 0.9em;overflow: auto;color: rgb(106, 115, 125);padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;border-left-color: rgb(239, 112, 96);background: rgb(255, 249, 249);">
          <p style="font-size: 16px;padding-top: 8px;padding-bottom: 8px;color: black;line-height: 26px;">
           如果是嵌套对象则建议使用（）括起来
          </p>
         </blockquote>
         <p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">
          <strong>
           例：${(stu.bestFriend.name)!''}表示，如果stu或bestFriend或name为空默认显示空字符串。
          </strong>
         </p>
        </section>
        <p style="margin-bottom: 0px;">
         <br/>
        </p>
        <p style='outline: 0px;max-width: 100%; -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;color: rgb(0, 0, 0);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;margin-bottom: 0px;'>
         <span style='outline: 0px;max-width: 100%;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;box-sizing: border-box !important;overflow-wrap: break-word !important;'>
          如果您觉得本文不错，
         </span>
         <span style='outline: currentcolor none 0px;max-width: 100%;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 24px;box-sizing: border-box !important;overflow-wrap: break-word !important;'>
          欢迎关注,点赞,收藏支持
         </span>
         <span style='outline: 0px;max-width: 100%;font-weight: bolder; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;box-sizing: border-box !important;overflow-wrap: break-word !important;'>
          ，您的关注是我坚持的动力！
          <br style="outline: 0px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;"/>
         </span>
        </p>
        <section class="mp_profile_iframe_wrp">
         <mp-common-profile class="js_uneditable custom_select_card mp_profile_iframe" data-alias="NotCore825505212" data-from="0" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/fx1lx9ichONaibvH7u0evaWIptiaoBAHTXq4xDaS8ZaNhe1VZSHh1u8uJ5cdTzndFicFQOyszTEA3O6JNxfdPYCHzw/0?wx_fmt=png" data-id="MzIzMjIyNTYwNg==" data-is_biz_ban="0" data-nickname="springboot葵花宝典" data-pluginname="mpprofile" data-signature="主要分享JAVA技术，主要包含SpringBoot、SpingCloud、Docker、中间件等技术，以及Github开源项目">
         </mp-common-profile>
        </section>
        <p style='outline: 0px;max-width: 100%; -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;color: rgb(34, 34, 34);background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;margin-bottom: 0px;'>
         <span style='outline: 0px;max-width: 100%; Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;box-sizing: border-box !important;overflow-wrap: break-word !important;'>
          原创不易，转载请注明出处，感谢支持！如果本文对您有用，欢迎转发分享！
         </span>
        </p>
        <p>
         <br/>
        </p>
        <p style="display: none;">
         <mp-style-type data-value="3">
         </mp-style-type>
        </p>
       </div>
      </div>
      <div class="article-tag__error-tips" id="js_tags_preview_toast" style="display: none;">
       预览时标签不可点
      </div>
      <div id="content_bottom_area">
      </div>
      <div class="rich_media_tool_area" id="js_temp_bottom_area">
       <div class="rich_media_tool__wrp">
        <div class="rich_media_tool">
         <div class="rich_media_info weui-flex">
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <div class="rich_media_area_primary sougou" id="sg_tj" style="display:none">
    </div>
    <div class="rich_media_area_extra">
     <div class="rich_media_area_extra_inner">
      <div id="page_bottom_area">
      </div>
     </div>
    </div>
    <div class="qr_code_pc_outer" id="js_pc_qr_code" style="display:none;">
     <div class="qr_code_pc_inner">
      <div class="qr_code_pc">
       <p>
        微信扫一扫
        <br/>
        关注该公众号
       </p>
      </div>
     </div>
    </div>
   </div>
   <div class="wx_stream_article_slide_tip" id="wx_stream_article_slide_tip">
   </div>
  </div>
  <div class="wx_network_msg_wrp" id="js_network_msg_wrp">
  </div>
  <div id="js_ad_control">
  </div>
  <div id="audio_panel_area">
  </div>
  <div id="js_profile_card_modal">
  </div>
  <div class="comment_primary_emotion_panel_wrp" id="js_emotion_panel_pc" style="display: none">
   <div class="comment_primary_emotion_panel">
    <ul class="comment_primary_emotion_list_pc" id="js_emotion_list_pc">
    </ul>
   </div>
  </div>
  <div class="weui-dialog__wrp" id="js_alert_panel" style="display:none;">
   <div class="weui-mask">
   </div>
   <div class="weui-dialog">
    <div class="weui-dialog__bd" id="js_alert_content">
    </div>
    <div class="weui-dialog__ft">
     <a class="weui-dialog__btn weui-dialog__btn_default" href="javascript:;" id="js_alert_confirm">
      知道了
     </a>
    </div>
   </div>
  </div>
  <style>
   .weui-dialog_link{-webkit-transform:translateY(-75%);transform:translateY(-75%)}
  </style>
  <div class="weui-desktop-popover weui-desktop-popover_pos-up-center weui-desktop-popover_img-text weapp_code_popover" id="js_pc_weapp_code" style="display: none;">
   <div class="weui-desktop-popover__inner">
    <div class="weui-desktop-popover__desc">
     微信扫一扫
     <br/>
     使用小程序
     <span id="js_pc_weapp_code_des">
     </span>
    </div>
   </div>
  </div>
  <div aria-labelledby="js_minipro_dialog_head" aria-modal="true" id="js_minipro_dialog" role="dialog" style="display:none;" tabindex="0">
   <div class="weui-mask">
   </div>
   <div class="weui-dialog weui-dialog_link">
    <div class="weui-dialog__hd">
     <strong class="weui-dialog__title" id="js_minipro_dialog_head" tabindex="0">
     </strong>
    </div>
    <div class="weui-dialog__bd" id="js_minipro_dialog_body">
    </div>
    <div class="weui-dialog__ft">
     <a class="weui-dialog__btn weui-dialog__btn_default" href="javascript:void(0);" id="js_minipro_dialog_cancel" role="button">
      取消
     </a>
     <a class="weui-dialog__btn weui-dialog__btn_primary" href="javascript:void(0);" id="js_minipro_dialog_ok" role="button">
      允许
     </a>
    </div>
   </div>
  </div>
  <div aria-labelledby="js_link_dialog_body" aria-modal="true" id="js_link_dialog" role="dialog" style="display:none;" tabindex="0">
   <div class="weui-mask">
   </div>
   <div class="weui-dialog weui-dialog_link">
    <div class="weui-dialog__hd">
     <strong class="weui-dialog__title" id="js_link_dialog_head" tabindex="0">
     </strong>
    </div>
    <div class="weui-dialog__bd" id="js_link_dialog_body" tabindex="0">
    </div>
    <div class="weui-dialog__ft">
     <a class="weui-dialog__btn weui-dialog__btn_default" href="javascript:void(0);" id="js_link_dialog_cancel" role="button">
      取消
     </a>
     <a class="weui-dialog__btn weui-dialog__btn_primary" href="javascript:void(0);" id="js_link_dialog_ok" role="button">
      允许
     </a>
    </div>
   </div>
  </div>
  <div class="analyze_btn_wrap" id="js_analyze_btn" style="display:none">
   <button class="close-button">
    ×
   </button>
   <button class="go-button wx_tap_card js_wx_tap_highlight">
    分析
   </button>
  </div>
  <div id="unlogin_bottom_bar" style="display:none;">
   <div class="bottom_bar_wrp" id="js_article_bottom_bar">
    <div id="article_bottom_bar_area">
    </div>
   </div>
   <div class="bottom_bar_padding_mask">
   </div>
  </div>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_colon" style="display:none">
   ：
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma0" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma1" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma2" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma3" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma4" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma5" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma6" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma7" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma8" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma9" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comma10" style="display:none">
   ，
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_period" style="display:none">
   。
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_space" style="display:none">
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_type_video" style="display:none">
   视频
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_type_weapp" style="display:none">
   小程序
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_zan_btn_txt" style="display:none">
   赞
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_zan_btn_tips" style="display:none">
   ，轻点两下取消赞
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_like_btn_txt" style="display:none">
   在看
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_like_btn_tips" style="display:none">
   ，轻点两下取消在看
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_share_btn_txt" style="display:none">
   分享
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_comment_btn_txt" style="display:none">
   留言
  </span>
  <span aria-hidden="true" class="weui-a11y_ref" id="js_a11y_collect_btn_txt" style="display:none">
   收藏
  </span>
 </body>
</html>
